我正在试验这个d3 demo,我无法调试为什么我在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>
答案 0 :(得分:4)
您需要为Firefox中的任何width
元素设置height
和svg
。根据{{3}},svg元素将默认使用“100%”,但我的Firefox 17(可能还有其他浏览器)可能还没有像那样实现它。
在代码中设置一些绝对值时,它会按预期工作。
<svg width="600" height="600">