d3.js java_d3.js——使用svg

相比HTML元素，使用SVG可以绘制出更多的图形，此文尝试将d3.js与SVG结合

由于我也是第一次使用SVG，所以主要根据此篇blog的顺序来Let’s Make a Bar Chart, II

静态SVG使用

手打SVG

.chart rect {

fill: steelblue;

}

.chart text {

fill: white;

font: 10px sans-serif;

text-anchor: end;

}

4

8

15

16

23

42

g元素：用于组合对象的容器，添加到g元素上的变换会应用到所有子元素上

rect与text就没啥好讲了

同时，在SVG中有一个容易混淆的点：哪些样式一定要写在属性之中(比如rect的width)，哪些样式可以通过style表现(如fill，当然他们也可以写在属性之中，但不知道为什么优先级低于class给予的样式)。一个比较好记的方法就是：形状几何(如rect的width)要写在属性之中，修饰类的(如fill)可通过style表现

d3生成SVG

先贴代码，CSS不变

let data = [4, 8, 15, 16, 23, 42];

let width = 420,

barHeight = 20;

let x = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width]);

let chart = d3.select('.chart')

.attr('width', width)

.attr('height', barHeight * data.length);

let bar = chart.selectAll('g') //数据绑定在g上

.data(data)

.enter().append('g')

.attr('transform', (d, i) => { return 'translate(0,' + i * barHeight + ')'});

bar.append('rect')

.attr('width', d => x(d))

.attr('height', barHeight - 1);

bar.append('text')

.attr('x', d => x(d) - 3) //字符x轴位置

.attr('y', barHeight/2) //字符y轴位置

.attr('dy', '.35em') //字符相对位置

.text(d => d);

其实差别不是特别多，只不过是用了SVG，并且把数据绑在g上，不用做另外的数据绑定

加载数据

d3.tsv()可以用于加载解析TSV格式的数据

总结

本文主要是讲述了对svg的使用，但核心思想还是不变的

参考资料