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来说明解决方案。

Answer 2

根据初步回答，您有与圈子相关联的不同数据，其中d.value不是d.name。您还在颜色范围声明中遗漏了一个井号：
var color = d3.scale.ordinal().range(["c9bebe", "#787676", "#4d4dff"]);，显然应该是：
var color = d3.scale.ordinal().range(["#c9bebe", "#787676", "#4d4dff"]);。

我可以在所有讨论中添加的另一件事是，为了简单和清晰起见，您可以直接将您的颜色与包含circles的组相关联。因此，您可以将其添加到组中，而不是将样式添加到circle元素：

var point = column.append("g")
  .attr({
    "class": "line-point",
    "fill": function(d) { return color(d.name); }
    });

console.log在代码的不同位置是一种以方法方式查找问题的好方法。

JSFiddle adjusted

在多线图表上填充与线条颜色相同的点

2 个答案:

调试

溶液