javascript - 将 'rect' 元素添加到 d3 中的空白 svg Canvas 在 .data() 上失败

Question

我正在使用 Polymer 渲染一些 d3 图表。当 polymer 最初渲染时，我只绘制一个带有轴的图形，没有数据，因为一旦 API 调用成功，数据就会稍后出现。但是，当我开始选择 svg 中的“矩形”元素时，调用 data() 会失败。这是我的代码:

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() 在渲染时被调用，dataChanged() 在父组件向下传递一 block 数据时被调用。一切正常，直到 svg.selectAll("rect").data(bins) 因 Uncaught TypeError: svg.selectAll(...).data is not a function 崩溃时被调用。 bins 中有正确的数据，所以它不是空的。我知道没有 rect 元素可供选择，但在 example I followed here 中无论如何，在通过此调用附加它们之前没有 rect 元素，所以我很困惑为什么这不起作用。

Answer 1

这一行的目的是什么:

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

这将使 svg 成为过渡，您的代码暗示它应该是选择。因此，只需将其放入 .transition 即可:

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

...

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