Question

我是从多行示例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 axsis：在我的代码中它是序数而不是线性的。所以要绘制代码的行：

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);

我将点颜色与行的颜色相同，但问题是颜色被分配给“列”对象。我不知道如何给同一列中的每个新圆圈赋予相同的列颜色......

我不知道我的问题是否清楚，请问我是否需要更多规格。感谢

在折线图中添加点和值...如何为线条上的点着色？

0 个答案: