Das Hinzufügen von "rect" -Elementen zu leeren Svg-Canvas in d3 schlägt bei .data() fehl.

Question

Ich verwende Polymer, um einige d3-Diagramme zu rendern. Wenn das Polymer anfänglich gerendert wird, zeichne ich nur ein Diagramm mit Achsen und keine Daten, da die Daten später kommen, sobald die API-Aufrufe erfolgreich sind. Wenn ich jedoch die "richtigen" Elemente im Svg auswähle, schlägt der Aufruf von data() fehl. Hier ist mein Code:

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

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

    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") 
     .duration(300) 
     .call(d3.axisBottom(x)); 

    svg.select(".yAxis") 
     .duration(300) 
     .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() wird aufgerufen, Rendering, dataChanged(), wenn die übergeordnete Komponente nach unten ein Stück von Daten geht. Alles funktioniert gut, bis svg.selectAll("rect").data(bins) aufgerufen wird, wenn es mit Uncaught TypeError: svg.selectAll(...).data is not a function abstürzt. bins hat die richtigen Daten drin, also ist das nicht leer. Ich weiß, dass es keine rect Elemente zur Auswahl gibt, aber in der example I followed here gibt es keine rect Elemente, bevor sie von diesem Aufruf trotzdem angehängt werden, so dass ich verwirrt bin, warum das nicht funktioniert.

Answer 1

Was ist der Zweck dieser Linie ist:

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

Dies würde svg ein Übergang, der Code impliziert es sollte Auswahl sein. Also, lass es einfach fallen lassen .transition:

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

... 

svg.selectAll("rect") 
    .data(bins) 
    ...