D3.js是什么

D3是指数据驱动文档（Data-Driven Documents），官方定义：

1
D3.js是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时，它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。

D3.js开发数据可视化，性能方面和highcharts,echarts对比区别

Highcharts和echarts是一类东西，但跟d3.js维度不同。假如前面两个能解决你的需求，那么就可以先不考虑d3。

Highcharts和echarts基本上就是画图表用的，d3.js更自由一些，你很容易去做出自己想要的效果，比如mind chart、heat chart、tile chart之类的东西

而性能方面，简单图表都没什么问题，数据量大、复杂运算、动画效果多的话，都快不了，区别就是svg性能更差，canvas能好不少罢了。

绘制矩形

本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴。

在 SVG 中，矩形的元素标签是 rect。例如：

1
2
3
4
<svg>
<rect></rect>
<rect></rect>
</svg>

上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

  • x - 矩形左上角的 x 坐标
  • y - 矩形左上角的 y 坐标
  • width - 矩形的宽度
  • height - 矩形的高度

要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

现在给出一组数据，要对此进行可视化。数据如下：

1
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

为简单起见，我们直接用数值的大小来表示矩形的像素宽度（后面会说到这不是一种好方法）。然后，添加以下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：

1
2
3
4
svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

这段代码以后会常常出现在 D3 的代码中，请务必牢记。目前不深入讨论它的作用机制是怎样的，只需要读者牢记，当：

有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。

添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。

最后一行的：

1
.attr("fill","steelblue");

是给矩形元素设置颜色。一般来说，最好写成外置 CSS 的形式，方便归类和修改。这里为了便于初学者理解，将样式直接写到元素里。

最后更新： 2018年02月05日 09:51

赏
× 感谢支持
打赏二维码