Append 不是 d3.js 中的函数吗？

Question

I am new to D3.js and I have an error I do not understand. In the style section, I have this

.bar1 {
  fill: blue;
}

.bar2 {
  fill: red;
}

I my html code I define this ID:

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

In the JavaScript code, svg is defined like so:

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 + ")");

then in the javascript I have this definition of some logic to filter code

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

And finally

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

But I have this strange error that says append is not function. Please help

Answer 1

This happens when you don't have a selection. The "append" is not part of the d3 object but the selection. I think the problem with your code is that you are filtering after entering your data but the filter should go before the enter method.

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