Rects won't show up on d3 histogram

问题

I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed. However, when I get around to adding the 'rect' elements in the svg, despite them showing up in the Chrome devtools element inspector, they don't show up in the chart itself.

dataChanged: function() {
    var data = this.data;
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = this.width - margin.left - margin.right,
        height = this.height - margin.top - margin.bottom;

      // format the data
    data.forEach(function(d) {
        d.date = d3.isoParse(d.date);
    });

    // set the ranges
    var x = d3.scaleTime()
        .domain(d3.extent(data, function(d) { return d.date; }))
        .rangeRound([0, width]);
    var y = d3.scaleLinear()
        .range([height, 0]);

    var svg = d3.select(this.$.chart);

    var histogram = d3.histogram()
        .value(function(d) { return d.date; })
        .domain(x.domain())
        .thresholds(x.ticks(d3.timeMonth));

    var bins = histogram(data);

    y.domain([0, d3.max(bins, function(d) { return d.length; })]);


    var t = d3.transition()
        .duration(750)
        .ease(d3.easeLinear);

    svg.selectAll("rect")
        .data(bins)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", 1)
        .attr("transform", function(d) {
          return "translate(" + x(d.x0) + "," + y(d.length) + ")";
        })
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); });

    svg.select(".xAxis")
        .transition(t)
        .call(d3.axisBottom(x));

    svg.select(".yAxis")
        .transition(t)
        .call(d3.axisLeft(y));
},
ready: function() {
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = this.width - margin.left - margin.right,
        height = this.height - margin.top - margin.bottom;

    // set the ranges
    var x = d3.scaleTime()
        .domain([new Date(2010, 6, 3), new Date(2012, 0, 1)])
        .rangeRound([0, width]);
    var y = d3.scaleLinear()
        .range([height, 0]);

    // Add the SVG to my 'chart' div.    
    var svg = d3.select(this.$.chart).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    // Add the X Axis
    svg.append("g")
        .attr("class","xAxis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    // Add the Y Axis
    svg.append("g")
        .attr("class","yAxis")
        .call(d3.axisLeft(y));
 }

ready() gets called upon rendering, dataChanged() when the parent component passes a chunk of data down.

The axes get rendered correctly, with the right transitions and the right dimensions, but the rects don't. They show up in the chrome element inspector with a 0x17 size, even though this is what they look like: <rect class="bar" x="1" transform="translate(0,24.06417112299465)" width="101" height="275.93582887700535"></rect>

回答1:

In your ready function, you are grabbing your div creating an svg element adding a g element and then appending your axis to that g.

In your dataChanged function, you are grabbing your div and appending rects to it.

See the disconnect? You can't parent svg to HTML.

In ready do this:

 var svg = d3.select(this.$.chart).append("svg")
   .attr("width", width + margin.left + margin.right)
   .attr("height", height + margin.top + margin.bottom)
   .append("g")
   .attr("id", "canvas")
   .attr("transform",
         "translate(" + margin.left + "," + margin.top + ")");

In dataChanged:

var svg = d3.select("#canvas");

This will allow you to "find" the appropriate g to append your rects to.

来源：https://stackoverflow.com/questions/42304317/rects-wont-show-up-on-d3-histogram