javascript - Append 不是 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); });

但是我有一个奇怪的错误，说 append 不是函数。请帮忙

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