[英]d3.js - need help debugging differences in Chrome, Safari and Firefox
我正在嘗試這個d3演示 ,我無法調試為什么我在Chrome與Safari / FireFox中遇到不同的行為。 如果我運行下面的完整代碼 ,它可以在Chrome中運行,但不適用於Safari / Firefox。 我似乎已將問題與以下內容隔離開來:
如果我更改此行:
var circles = chart.select("#points").selectAll("circle")
對此:
var circles = chart.selectAll("circle")
它適用於Safari / Firefox / Chrome,但我想了解發生了什么,以及為什么下面的代碼不起作用。 任何見解將不勝感激。
完整代碼
<svg>
<g id="chart">
<g id="bg">
</g>
<g id="countries">
</g>
<g id="points">
</g>
</g>
</svg>
<script type="text/javascript">
d3.json("costofliving.json", function(col) {
var cx = 200;
var cy = 132;
var cw = 400;
var ch = 400;
var svg = d3.select("svg");
var nticks = 14;
var price_min = 0;
var price_max = d3.max(col, function(d) {return d.price});
var rent_min = 0;
var rent_max = d3.max(col, function(d) {return d.rent});
var price_scale = d3.scale.linear()
.domain([price_min, price_max])
.range([ch, 0]);
var rent_scale = d3.scale.linear()
.domain([rent_min, rent_max])
.range([0, cw]);
var price_layout = d3.layout.histogram()
.value(function(d) { return d.price })
.range([0, price_max])
.bins(nticks);
var rent_layout = d3.layout.histogram()
.value(function(d) { return d.rent })
.range([0, rent_max])
.bins(nticks);
var chart = svg.append("g")
.attr("transform", "translate(" + [cx, cy] + ")");
chart.append("g")
.attr("id", "countries")
.style("opacity", 0);
chart.append("g")
.attr("id", "points")
var circles = chart.select("#points").selectAll("circle")
.data(col);
circles.enter()
.append("circle")
circles.attr({
r: 6,
cx: function(d,i) {
return rent_scale(d.rent);
},
cy: function(d,i) {
return price_scale(d.price);
}
})
});
</script>
您需要為Firefox中的任何svg
元素設置width
和height
。 根據W3C規范 ,svg元素將默認使用“100%”,但我的Firefox 17(可能還有其他瀏覽器)可能尚未實現它。
在代碼中設置一些絕對值時,它按預期工作。
<svg width="600" height="600">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.