我正在嘗試用點復制這個多折線圖的例子。我的資料基本上是一樣的，我在第一級有一個物件name和values，然后在第二級里面有幾個值values。在大多數情況下，我的代碼有效，但由于某種原因，j填充的匿名函式中的索引回傳一個重復的陣列，circle而不是回傳當前元素的父元素。我相信這可能與我創建 svg 和選擇元素的方式有關，但我無法弄清楚。下面是我的代碼摘錄，顯示了我如何創建 svg、線路徑和圓圈。
var svgb = d3.select("body")
.append("svg")
.attr("id","svg-b")
.attr("width", width)
.attr("height", height)
var gameb = svgb.selectAll(".gameb")
.data(games)
.enter()
.append("g")
.attr("class", "gameb");
gameb.append("path")
.attr("class", "line")
.attr("d", function(d) {return line_count(d.values); })
.style("stroke", function(d) { return color(d.name); })
.style("fill", "none");
gameb.selectAll("circle")
.data(function(d) {return d.values;})
.enter()
.append("circle")
.attr("cx", function(d) {return x(d.date);})
.attr("cy", function(d) {return y_count(d.count);})
.attr("r", 3)
.style("fill", function(d,i,j) {console.log(j)
return color(games[j].name);});
uj5u.com熱心網友回復：
j（或者更準確地說，第三個引數）將始終是選擇中的節點（這里的圓圈陣列），而不是父節點。如果你想要父資料，你可以使用：
.attr("fill", function() {
let parent = this.parentNode;
let datum = d3.select(parent).datum();
return color(datum.name);
})
請注意，使用 ()=> 而不是 function() 將更改this背景關系，并且上述方法不起作用。
但是，您可以使用 a 或 parentg來為圓圈著色，而不是獨立地為每個圓圈著色：
gameb.append("g")
.style("fill", function(d) { return color(d.name); })
.selectAll("circle")
.data(function(d) {return d.values;})
.enter()
.append("circle")
.attr("cx", function(d) {return x(d.date);})
.attr("cy", function(d) {return y_count(d.count);})
.attr("r", 3);
在這里我們添加一個中間體g（盡管我們可以使用原始父級并進行一些額外的修改），為其應用填充顏色，然后父級g將為我們為子級圓圈著色。資料被傳遞到這個新g的幕后。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326017.html
標籤：javascript d3.js 匿名函数 多行