如何使用 .each() 或其他方法更改 D3.js 散点图中第一个点的颜色

Question

我有一个散点图，它使用三个不同的 CSV。以下是 Javascript 控制用于其中之一的点：

svg.append('g')
    .selectAll("dot")
    .data(files[2])
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Index); } )
      .attr("cy", function (d) { return y(d.Value); } )
      .attr("r", 4)
      .style("fill", "#d3d3d3")

目前，此 CSV 中的点为浅灰色。但是，如何使此 CSV 中列出的第一个点或我想要的任何其他点具有不同的颜色？提前致谢。

Answer 1

欢迎使用 Whosebug！

为了实现您想要的效果，您可以使用 fill 样式的回调，就像您在 cx 和 cy 中所做的那样，但添加第二个参数i，此回调的第二个参数是索引（从零开始），然后您可以有条件地 return 一个值或另一个值。像这样：

svg.append('g')
  .selectAll("dot")
  .data(files[2])
  .enter()
  .append("circle")
    .attr("cx", function (d) { return x(d.Index); } )
    .attr("cy", function (d) { return y(d.Value); } )
    .attr("r", 4)
    .style("fill", function (d, i) { 
      if(i === 0) {
        return "#f05050"
      } else {
        return "#d3d3d3"
      }
    })

如何使用 .each() 或其他方法更改 D3.js 散点图中第一个点的颜色

How to use .each() or another method to change the color of the first point in a D3.js scatter plot

javascript

data-visualization

scatter-plot

d3.js