[英]d3.js - need help debugging differences in Chrome, Safari and Firefox
I am experimenting with this d3 demo and I am having trouble debugging why I am experiencing different behavior in Chrome vs. Safari/FireFox. 我正在尝试这个d3演示 ,我无法调试为什么我在Chrome与Safari / FireFox中遇到不同的行为。 If I run the full code below, it works in Chrome but not in Safari/Firefox.
如果我运行下面的完整代码 ,它可以在Chrome中运行,但不适用于Safari / Firefox。 I seem to have isolated the problem to the following:
我似乎已将问题与以下内容隔离开来:
If I change this line: 如果我更改此行:
var circles = chart.select("#points").selectAll("circle")
to this: 对此:
var circles = chart.selectAll("circle")
it works in Safari/Firefox/Chrome, but I want to understand what is happening and why the code below doesn't work. 它适用于Safari / Firefox / Chrome,但我想了解发生了什么,以及为什么下面的代码不起作用。 Any insight would be greatly appreciated.
任何见解将不胜感激。
Full Code 完整代码
<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>
You need to set a width
and height
for any svg
element in Firefox. 您需要为Firefox中的任何
svg
元素设置width
和height
。 According to the W3C Spec , the svg element will use "100%" as default, but my Firefox 17 (and probably other browsers) may not yet implement it like that. 根据W3C规范 ,svg元素将默认使用“100%”,但我的Firefox 17(可能还有其他浏览器)可能尚未实现它。
When setting some absolute values in your code it works as expected. 在代码中设置一些绝对值时,它按预期工作。
<svg width="600" height="600">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.