D3.js 正在向折线图添加点和值。。。如何像线一样给点上色？

我从多行示例开始 我扩展了它来显示线上的点，但是我不能给圆以线的相同颜色。。。 我是d3.js的新手，我真的需要一个建议。 下面是示例页面： 我已经更改了一些变量名，使脚本更加通用，因此与原始示例代码有一些不同。主变量是包含映射数据的变量的名称：它是“column”而不是“cities”

第二个主要区别是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);

我希望链接点的颜色与直线的颜色相同，但问题是颜色被指定给“column”对象。我不知道如何给同一列中的每个新圆圈赋予相同的列颜色

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

---

谢谢

最简单的方法是将名称存储在值中并引用它。这太完美了！！！多谢各位。这里有一个页面上的补丁：@danipen有什么想法吗？

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