所以我使用 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);
})
uj5u.com熱心網友回復：
在 opacity 屬性（和其他屬性）的函式簽名中，您可以使用wherefunction(d, i)代替選擇中元素的索引。function(d)idata
既然你知道你想要的公式，那就是：
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/442979.html
標籤：javascript d3.js
上一篇：手動拋出LaravelValidationExceptionVSFormRequestValidationException
下一篇：波紋環位于地圖的背面而不是正面