如何在 D3 散点图中设置不同的点不透明度

Question

所以我使用 D3 绘制了这个散点图，每个数据点都有点。

svg.append("g")
  .selectAll("dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return xScale(d.PC);
  })
  .attr("cy", function(d) {
    return yScale(d.TRIN_NORM);
  })
  .attr("r", 2)
  .attr("opacity", 1.0)      // HERE JUST SET OVERALL OPACITY
  .style("fill", "Blue")

这是图表的图片：

PC 和 TRIN_NORM 列都是 1000 个条目。

现在我希望每个圆的不透明度根据其在数组中的位置而变化。例如，不透明度从 i=0 到 999 不等，这样：

opacity(i) = 0.05 + (1.0-0.05)/999 * i

最后一个数据点的不透明度在 0.05 到 1.0 之间变化。

我怎样才能做到这一点？我只是 javascript 和 D3 的初学者，所以任何帮助将不胜感激。

====

我也按照下面的建议更改了圆圈的颜色

                .attr("opacity", function(d, i) {
                    return 0.05 + (1.0 - 0.05) / 999 * i;
                })
                .style("fill", function(d, i) {
                    return d3.interpolatePlasma((999 - i) / 999);
                })

Answer 1

在不透明度属性（和其他属性）的函数签名中，您可以使用 function(d, i) 而不是 function(d)，其中 i 是 data 元素的索引在选择中。

既然你知道你想要的公式，那就是：

.attr("opacity", function(d, i) {
  return 0.05 + (1.0-0.05)/999 * i;
})

这是一个包含 10 个圆圈的示例（因此示例中是 9 个而不是 999 个）：

// svg
const svg = d3.select("body")
  .append("svg")
  .attr("width", 320)
  .attr("height", 100);

// sample array
let data = [];
for (let i=0; i<10; i++) {
  data.push({"name": "dot_" + i, "someProperty": "someValue"});
}

// 10 dots in a line with opactiy linked to index
svg.append("g")
  .selectAll("dot")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    //return xScale(d.PC);
    return (i * 28) + 16;
  })
  .attr("cy", function(d) {
    //return yScale(d.TRIN_NORM);
    return 50;
  })
  .attr("r", 12)
  .attr("opacity", function(d, i) {
    //return 100;
    return  0.05 + (1.0 - 0.05) / 9 * i
  })
  .style("fill", "Blue")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如何在 D3 散点图中设置不同的点不透明度

How to set a varying opacity of dots in a D3 scatter plot

javascript

d3.js