我从多行示例开始http://bl.ocks.org/mbostock/3884955我将其扩展以显示沿线的点,但我无法为圆圈提供与线相同的颜色......
我是 d3.js 的新手,我真的需要建议。
这里是示例页面:http://www.danielepennati.com/d3/linea.html我更改了一些变量名称以使脚本更加通用,因此与原始示例代码存在一些差异。主要的一个是包含映射数据的变量的名称:它是“列”而不是“城市”
d3.tsv(surce_data, function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "id"; }));
var column = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {id: d.id, value: +replace(d[name])};
})
};
});
第二个主要区别是 x 轴:在我的代码中它是有序的并且不是线性的。
所以画线的代码是:
var tracciato = svg.selectAll(".line-group")
.data(column)
.enter().append("g")
.attr("class", "line-group");
tracciato.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
为了阐明这一点,我编写了这段代码:
var point = tracciato.append("g")
.attr("class", "line-point");
point.selectAll('circle')
.data(function(d,i){ return d.values})
.enter().append('circle')
.attr("cx", function(d, i) {
return x(i) + x.rangeBand() / 2;
})
.attr("cy", function(d, i) { return y(d.value) })
.attr("r", 5);
我将链接点的颜色与线的颜色相同,但问题是颜色被分配给“列”对象。我不知道如何为同一列中的每个新圆圈赋予相同的列颜色......
我不知道我的问题是否清楚,请询问我是否需要更多规范。
谢谢