在 d3 中将'rect'元素添加到空白 svg 画布在 .data() 上失败

Question

我正在使用Polymer来渲染一些d3图表。当 Polymer 最初渲染时，我只绘制一个带有轴的图形，没有数据，因为一旦 API 调用成功，数据就会出现。但是，当我开始在 svg 中选择"rect"元素时，调用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()当父组件向下传递数据块时。一切正常，直到svg.selectAll("rect").data(bins)在崩溃时被调用Uncaught TypeError: svg.selectAll(...).data is not a function.bins包含正确的数据，因此它不是空的。我知道没有rect元素可供它选择，但是在我在这里遵循的示例中，无论如何，在它们被此调用附加之前没有rect元素，所以我对为什么这不起作用感到困惑。

Answer 1

这一行的目的是什么：

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

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

：

var svg = d3.select(this.$.chart);
...
svg.selectAll("rect")
.data(bins)
...