d3.js：如何訪問svg組元素的填充屬性（堆疊的條形圖）

Question

) from the sample link : http://bl.ocks.org/mbostock/3886208 (by Mike Bostock) 這里是新手d3.js，我正在嘗試使用d3.stack() （ 請注意：不是 ）（來自示例鏈接： http ： d3.stack()來了解堆積條形圖的示例/ mbostock / 3886208 （作者Mike Bostock）

我正在嘗試訪問每個svg組元素的fill屬性，每個元素代表一個“層” /年齡組。 為此，我在“輸入”部分做了一些修改：

var seriesG = g.selectAll(".serie") 
    .data(function(){return stackedColumns;})
    .enter().append("g")
      .attr("class", "serie")
      .attr("fill", function(d) {return z(d.key); });

由於console.log(seriesG); 導致zi {_groups: Array[1], _parents: Array[1]} ，我認為代表七個年齡段組的七個svg組元素可以在_groups成員對象中訪問。

現在，我可以通過以下基本的遞歸例程訪問每個svg組元素：

seriesG._groups.forEach(function(d, i){
    console.log(d);
  });

在瀏覽器元素檢查器控制台（opera）中顯示[g, g, g, g, g, g, g] 。 我想找出的是訪問'd'數據的fill屬性的正確語法。 並且由於觀察了瀏覽器控制台，我知道“填充”是“ d”數據的'outerHTML'成員屬性的成員，因此我首先必須知道如何訪問該“ outerHTML”屬性。 我嘗試了各種語法：

• console.log(d.attr("outerHTML"));
• console.log(d.attr.outerHTML);
• console.log(d.outerHTML);
• console.log(d["outerHTML"]);

前兩次嘗試導致Uncaught TypeError: d.attr is not a function ，而其余​​兩個是undefined操作。

因此，在我的問題的簡短版本中是：“訪問使用d3.stack()創建的每個svg組元素的填充的正確語法是什么？”

我的最終目標是向此示例鏈接添加類似的各種功能： http : //bl.ocks.org/KatiRG/f7d064cd9c3efbc3c360

Answer 1

首先，不要使用_groups 。 這意味着選擇對象是私有的。 您應該使用.nodes方法 。

其次，我的問題是您想用那些填充物做什么？

您嘗試編寫的代碼是這樣的：

seriesG.nodes().forEach(function(d){
   console.log(d3.select(d).attr('fill'));
});

但是，根據目的，並且由於您知道密鑰（在示例中，您鏈接到的是“ 65年及以上”，“ 45至64年”等），因此，任何“密鑰”的填充值可以簡單地返回為：

z("65 Years and Over");

Answer 2

您可以使用.getAttribute()

這樣： element.getAttribute('fill')

此處的更多信息： https : //developer.mozilla.org/fr/docs/Web/API/Element/getAttribute