0
我正在使用聚合物渲染某些d3圖表。當聚合物最初呈現時,我只繪製一個帶有座標軸但沒有數據的圖形,因爲一旦API調用成功,數據就會出現。但是,當我開始選擇svg中的'rect'元素時,在調用data()
時失敗。這裏是我的代碼:將'rect'元素添加到空白svg畫布在d3中失敗.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
元素可供選擇,但在example I followed here元素之前沒有rect
元素,因此無論如何我都會將其添加到此元素之前,所以我很困惑,爲什麼這樣做不起作用。
啊,是的,是的,是的,這是做的伎倆。我希望新酒吧在他們成立時使用過渡。現在我的代碼運行,但是矩形條在圖上不可見。 Inspector向我展示了它們的高度爲0x17,即使這是svg:' '...... –
IronWaffleMan
'我希望新酒吧在它們出現時使用過渡,過渡將應用於包含酒吧的選擇(rects),而不是svg容器。您還需要定義過渡應該如何工作。對於你的新問題,你必須用一個可重現的例子來更新你的問題(或者至少是你的數據,這樣我才能重現你的問題)。沒有足夠的細節來猜測。 – Mark
右鍵。在這裏提出了一個新問題:http://stackoverflow.com/questions/42304317/rects-wont-show-up-on-d3-histogram – IronWaffleMan