追加不是d3.js中的函数？

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); });

但我有这个奇怪的错误，说追加不是功能。请帮忙

Answer 1

如果没有选择，就会发生这种情况。 “追加”不是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();