Question

在完成教程后，我正在研究我的第一个中等规模的d3项目。我理解秤，输入，更新和退出，所以我对我遇到的问题感到很困惑。

我有一组JSON对象，包含两个字段year和number。我正在使用以下代码创建一个带有此数组的条形图：

var bar = chart.selectAll('g')
    .data(yearData)
  .enter().append('g')
    .attr('transform', function(d, i) {
      console.log(i);
      return 'translate(' + i * barWidth + ',0)'; });

我的困惑源于这个代码块中的console.log语句输出27作为其第一个值。换句话说，d3正在跳过我的数组的元素0-26。为什么会这样？

感谢您的帮助。

Answer 1

这很可能是因为您的网页上已经有g个元素（例如添加了一个轴）。选择这些数据并与数据匹配，因此输入选择不包含您期望的所有内容。

一种解决方案是为这些元素分配一个类并相应地进行选择：

var bar = chart.selectAll('g.bar')
 .data(yearData)
 .enter().append('g')
 .attr("class", "bar")
 // ...

this tutorial的后半部分有更多细节。

d3输入（）。append（）不附加我的数组的所有元素

1 个答案: