5分钟学会D3.js如何创建数据的可视化
D3.js是一个JavaScript库，用于根据数据处理文档。它使用HTML，CSS和SVG创建可在任何现代浏览器上查看的数据的可视表示。它还为交互和动画提供了一些非常棒的功能。
在本教程中，我们将探讨D3.js的基本概念和功能。我们将学习如何在一些例子的帮助下使用它，比如渲染条形图，呈现HTML和SVG元素，以及向它们应用转换和事件。
开始使用D3
由于D3.js是一个JavaScript库，您可以简单地将它包含在脚本标记内的HTML文件中。
<script src='https://d3js.org/d3.v4.min.js'></script>
DOM选择
使用D3.js，我们可以操作文档对象模型（DOM），这意味着我们可以选择元素并对它们应用各种变换。
我们以一个简单的例子开始，我们将使用D3来选择和更改标题标签的颜色和字体大小。
<html>
<head>
<title>Learn D3 in 5 minutes</title>
</head>
<body>
<h3>Today is a beautiful day!!</h3>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
d3.select('h3').style('color', 'darkblue');
d3.select('h3').style('font-size', '24px');
</script>
</body>
</html>
因此，我们只需在d3对象上链接select()方法，然后使用style()。第一个参数决定了我们想要改变什么，第二个参数给出了值。结果:
Example 1: DOM Selection
数据绑定
您需要学习的下一个概念是数据绑定，因为这是D3最酷的功能之一。使用它，我们可以实时填充或操作DOM元素。
在我们的HTML中，我们有一个简单的无序列表<ul>：
<ul> </ ul>
我们想要使用数据对象来创建列表元素。以下是完成该操作的代码：
<script>
var fruits = ['apple', 'mango', 'banana', 'orange'];
d3.select('ul')
.selectAll('li')
.data(fruits)
.enter()
.append('li')
.text(function(d) { return d; });
</script>
我们用data()方法传入数据，然后添加enter()，这就像循环一样。此点后的所有内容都将在fruits数组中的每个项目中执行一次。
换句话说，它会<li>为数据中的每个项目附加一个。对于每个<li>标签，它还会使用该text()方法在文本内附加文本。回调函数d内部的参数text()指向给定迭代（苹果，芒果等）中数组中的元素。
这是我们的最终结果：
Example 2: Data Binding
创建SVG元素
可缩放矢量图形（SVG）是一种在DOM中呈现图形元素和图像的方法。由于SVG是基于矢量的，因此它既轻便又可扩展。D3使用SVG创建所有的视觉效果，因此它是图书馆的核心构建模块。
在下面的例子中，在SVG容器中使用D3绘制矩形。
//Select SVG element
var svg = d3.select('svg');
//Create rectangle element inside SVG
svg.append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width', 200)
.attr('height', 100)
.attr('fill', 'green');
在这段代码中，D3正在DOM中渲染一个矩形元素。它首先选择SVG元素，然后在其中渲染一个矩形元素。它还使用该attr()方法设置矩形的x和y坐标及其宽度，高度和填充属性。
示例3：创建SVG元素
创建一个条形图
D3还让我们创建了许多不同类型的图表和图表，以高效的方式表示数据。在下面的例子中，我们使用D3创建一个简单的条形图。
我们首先直接在HTML中创建一个SVG标签。
<svg width ='200'height ='500'> </ svg>
然后，我们将编写我们需要的JavaScript，以便在我们的<svg>标记中呈现条形图：
var data = [80, 120, 60, 150, 200];
var barHeight = 20;
var bar = d3.select('svg')
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('width', function(d) { return d; })
.attr('height', barHeight - 1)
.attr('transform', function(d, i) {
return "translate(0," + i * barHeight + ")";
});
在这段代码中，我们有一组数字，我们将用它来呈现条形图。数组中的每个项目都代表一个单独的栏。我们利用这样一个事实，即条只是具有可变宽度或高度的矩形。
选择SVG和矩形元素后，我们使用该data()方法传递数据集并调用enter()开始循环数据。
对于每个数据项，我们渲染一个矩形并将其宽度设置为与其值相等。然后我们设置每个小节的高度，为了避免重叠，我们通过减去1来提供一些填充barHeight。
然后，我们使用translate属性来转换我们的小节，它将逐个放置每个矩形，而不是从同一个点开始。transform()需要一个回调函数来获取其参数中的数据和索引。我们通过将索引与条的高度相乘来在y轴上平移矩形。
结果如下：
示例4：创建条形图
事件处理
最后，让我们来看看事件处理。D3还支持内置和自定义事件，我们可以使用它的侦听器将其绑定到任何DOM元素。在下面的示例中，我们将click事件绑定到按钮，并在其事件处理函数中将标题标签附加到主体。
d3.select（'＃btn'）.
on（'click'，function（）{
d3.select（'body'）.append
（'h3'）.
text（'Today is a beautiful day !!'）;
} ）;
所以当我们点击按钮时，会出现下面的文字：
示例5：事件处理
结论
D3.js是一个功能强大且简单的JavaScript库，它允许您使用HTML，CSS和SVG基于数据处理文档等。