简单重复序列分析_D3的简要介绍：如何构建可重复使用的气泡图

简单重复序列分析

by Déborah Mesquita

由DéborahMesquita

D3的简要介绍：如何构建可重复使用的气泡图 (A gentle introduction to D3: how to build a reusable bubble chart)

D3入门 (Getting Started with D3)

When I started to learn D3, nothing made sense to me. Things only became more clear when I started to learn about reusable charts.

当我开始学习D3时，对我来说没有任何意义。 当我开始学习可重用图表时，情况才变得更加清晰。

In this article, I’ll show you how to create a reusable bubble chart and give you a gentle introduction to D3 along the way. The dataset we’ll use is composed of stories published in the freeCodeCamp in January 2017.

在本文中，我将向您展示如何创建可重复使用的气泡图，并向您简要介绍D3。 我们将使用的数据集由2017年1月在freeCodeCamp中发布的故事组成。

关于D3 (About D3)

D3 is a JavaScript library for data visualization. It brings data to life using HTML, SVG and CSS.

D3是用于数据可视化JavaScript库。 它使用HTML，SVG和CSS使数据栩栩如生。

We often need to reuse a chart in another project, or event share the chart with others. For this, Mike Bostock (the creator of D3) proposed a model called reusable charts. We’ll use his approach with some small modifications, as presented by Pablo Navarro Castillo in the book Mastering D3.js.

我们经常需要在另一个项目中重用图表，或者与其他人共享图表。 为此，D3的创建者Mike Bostock提出了一种称为可重用图表的模型。 正如Pablo Navarro Castillo在Mastering D3.js一书中所介绍的那样，我们将使用他的方法进行一些小的修改。

We are using D3 version 4.6.0 here.

我们在这里使用D3版本4.6.0 。

可重复使用的图表 (?Reusable charts)

Graphs following the reusable chart pattern have two characteristics:

遵循可重用图表模式的图形具有两个特征：

• Configurability. We want to modify the appearance and behavior of the graph without having to modify the code itself.

  可配置性。 我们想要修改图形的外观和行为，而不必修改代码本身。

• Ability to be built in an independent way. We want every graph element associated with a data point of our dataset independently. This has to do with the way D3 associates data instances with DOM elements. This will become more clear in a minute.

  能够以独立方式构建。 我们希望每个图元素都与数据集的数据点独立关联。 这与D3将数据实例与DOM元素相关联的方式有关。 一分钟后，这将变得更加清晰。

“To sum up: implement charts as closures with getter-setter methods.” — Mike Bostock

“总而言之： 使用getter-setter方法将图表实现为闭包。” — 麦克·波斯托克 ( Mike Bostock)

气泡图 (The bubble chart)

You first need to define which elements of the chart can be customized:

您首先需要定义可以定制图表的哪些元素：

• The size of the chart
  图表大小
• The input dataset
  输入数据集

定义图表的大小 (Defining the size of the chart)

Let's start by creating a function to encapsulate all variables of the graph and set the default values. This structure is called a closure.

让我们从创建一个封装图的所有变量并设置默认值的函数开始。 这种结构称为闭包。

// bubble_graph.js

var bubbleChart = function () {    var width = 600,    height = 400;    function chart(selection){        // you gonna get here    }    return chart;}

You want to create charts of different sizes without having to change the code. For this you will create charts as follows:

您想要创建不同大小的图表，而无需更改代