Javascript d3.js-需要帮助调试Chrome、Safari和Firefox中的差异吗

我正在尝试这一点，我在调试为什么我在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>

json（“costofliving.json”，函数（col）{
var-cx=200；
var-cy=132；
var-cw=400；
var-ch=400；
var svg=d3.选择（“svg”）；
var nticks=14；
var价格_min=0；
var price_max=d3.max（col，函数（d）{return d.price}）；
var rent_min=0；
var rent_max=d3.max（col，函数（d）{返回d.rent}）；
var price_scale=d3.scale.linear（）
.domain（[price\u min，price\u max]）
.范围（[ch，0]）；
var rent_scale=d3.scale.linear（）
.domain（[租金最低，租金最高]）
.范围（[0，cw]）；
var price_layout=d3.layout.histogram（）
.value（函数（d）{返回d.price}）
.范围（[0，最高价格]）
.垃圾箱（nticks）；
var rent_layout=d3.layout.histogram（）
.value（函数（d）{返回d.rent}）
.范围（[0，最大租金]）
.垃圾箱（nticks）；
var chart=svg.append（“g”）
.attr（“转换”、“翻译”（+[cx，cy]+））；
图表.附加（“g”）
.attr（“id”、“国家”）
.样式（“不透明度”，0）；
图表.附加（“g”）
.attr（“id”、“点数”）
变量圆=图表。选择（#点”）。选择全部（“圆”）
.数据（col）；
圈。输入（）
.附加（“圆圈”）
圈。属性({
r:6，
cx：功能（d，i）{
返回租金表（d.租金）；
},
cy：功能（d，i）{
退货价格（d.价格）；
}
})  
});

您需要为Firefox中的任何

svg

元素设置

宽度

和

高度

。根据，svg元素将使用“100%”作为默认值，但我的Firefox 17（可能还有其他浏览器）可能还没有这样实现它

在代码中设置某些绝对值时，它会按预期工作

<svg width="600" height="600">

---

您需要为Firefox中的任何

svg

元素设置

宽度

和

高度

。根据，svg元素将使用“100%”作为默认值，但我的Firefox 17（可能还有其他浏览器）可能还没有这样实现它

在代码中设置某些绝对值时，它会按预期工作

<svg width="600" height="600">

您使用哪种Chrome、Safari和Firefox版本？我猜是最新的，但无论如何：）Safari 5.1.7；火狐16.0.2；Chrome 23该网站在我的Firefox 17中无法运行。在我的Chrome 23中加载时，一开始反应非常迟钝。也许问题与支流有关？这似乎也打破了我的FF。顺便问一下：我在哪里可以得到

costofliving.json

。我只能看到csv。谢谢你提供的信息。本演示中有

costofliving.json

：您使用的是哪种Chrome、Safari和Firefox版本？我猜是最新的，但无论如何：）Safari 5.1.7；火狐16.0.2；Chrome 23该网站在我的Firefox 17中无法运行。在我的Chrome 23中加载时，一开始反应非常迟钝。也许问题与支流有关？这似乎也打破了我的FF。顺便问一下：我在哪里可以得到

costofliving.json

。我只能看到csv。谢谢你提供的信息。在这个演示中有

costofliving.json

：谢谢你的清晰解释，我不知道。干杯这不是虫子。阅读《为什么不》这个复杂的故事。天哪，这真的很复杂。我想W3C需要更改规范谢谢你的解释，我不知道。干杯这不是虫子。阅读《为什么不》这个复杂的故事。天哪，这真的很复杂。我想W3C需要更改规范