D3.js:如何访问SVG组元素(堆叠条形图)的填充属性

d3.js : how to access fill attribute of svg group element (stacked bar chart)

本文关键字：元素 条形图 属性 填充 SVG 何访问 js D3 访问      更新时间：2023-09-26

newbie d3.js在这里，我试图理解使用d3.stack()的堆叠柱状图样本(注:不是d3.layout.stack())从样本链接:http://bl.ocks.org/mbostock/3886208(由Mike Bostock)

我试图访问每个svg组元素的填充属性，每个元素都代表一个单一的"层"/年龄组。为此，我在"enter"部分做了一些修改:

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]}，因此我认为在_groups成员对象中可以访问代表七个年龄范围组的七个svg组元素。

现在，我可以通过这个基本递归例程访问每个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

首先，不要使用_groups。这意味着选择对象的私有。您应该使用。nodes方法。

第二，我的问题是你想如何处理这些填充?

你要写的代码是这样的:

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

但是，根据目的，既然你知道你的键(在例子中你链接到这些是"65年及以上"，"45至64年"等)，那么任何"键"的填充值可以简单地返回为:

z("65 Years and Over");

您可以使用.getAttribute()

这样:element.getAttribute('fill')

更多信息在这里:https://developer.mozilla.org/fr/docs/Web/API/Element/getAttribute

相关文章：