d3.js 中没有“append”函数？

Question

我是D3.js的新手，遇到了一个不太理解的错误。在样式部分，我有以下代码：

.bar1 {
  fill: blue;
}

.bar2 {
  fill: red;
}

在我的html代码中，我定义了这个ID：

<div id="chart-svg"></div>

在JavaScript代码中，svg的定义如下：

var svg = d3.select("#chart-svg").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("class", "graph")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

在JavaScript中，我定义了一些逻辑来过滤代码。

barsM = svg.selectAll(".bar1").data(data).enter()
     .filter(function (d) {
         return (d.location_id == location_id)
             && (d.year == year)
             && (d.metric == metric)
             && (d.sex_id == 1)
     });

最后，

barsM.append("rect")
    .attr("class", "bar1")
    .attr("x", function (d) { return x(d.age_group); })
    .attr("width", x.rangeBand() / 2)
    .attr("y", function (d) { return y0(d.mean * 100); })
    .attr("height", function (d, i, j) { return height - y0(d.mean * 100); });

但是我遇到了一个奇怪的错误，说"append is not function"。请帮忙解决。

- xarzu

---

你能否创建一个可重现的 stacksnippet、jsfiddle 或 plunker 来展示这个错误？你的代码看起来是正确的。 - Mark

Answer 1

这种情况通常发生在你没有选择任何元素的时候。"append" 不是 d3 对象的一部分，而是选择器的一部分。我认为你代码的问题在于你在输入数据后进行了筛选，但实际上筛选应该在 enter 方法之前进行。

barsM = svg.selectAll(".bar1").data(data).filter(function (d) {
         return (d.location_id == location_id)
             && (d.year == year)
             && (d.metric == metric)
             && (d.sex_id == 1)
     }).enter();
     

- Nour Adel