javascript - 用与线条相同的颜色填充多线图上的点

Question

在条形折线图上，线条上的点是蓝色的 ( working sample )，尽管有一个函数可以用线条的颜色填充点

// circle points | кружочки на лініях

    point.selectAll("circle") 
    .data(function(d){ return d.values; })
    .enter().append("circle")
    .attr("cx", function(d) {
        return x(d.date) + x.rangeBand()/2;
      })
     .attr("cy", function(d, i) { return y(d.value); })
     .attr("r", 3)
     .style("fill", function(d) { return color(d.name); });

知道为什么它不起作用吗？

提前致谢!

Answer 1

调试

要调试此类问题，请在函数内使用 console.log 函数设置 fill 属性:

style("fill", function(d) { 
    console.log('d is', d)
    return color(d.name);
});

您会看到没有d.name。此属性未传递给 point:

// circle points | кружочки на лініях

    point.selectAll("circle") 
    .data(function(d){ return d.values; }) // point has access to d.values, not to d.name.

解决方案

要解决该问题，您可以执行以下操作:

在值数组的每个项目中添加name属性

point.selectAll("circle")
  .data(function(d) {

    // add name inside each value inside `d.values`
    d.values.forEach(function(value) {
      value.name = d.name
    })

    return d.values;
  })

然后您的 fill 函数将正常工作。

Fixed example来说明解决方案。