1

この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>
4

1 に答える 1

4

Firefoxの要素にはとを設定する必要がありますwidth。W3C仕様によると、svg要素はデフォルトとして「100％」を使用しますが、私のFirefox 17（およびおそらく他のブラウザー）はまだそのように実装していない可能性があります。heightsvg

コードに絶対値を設定すると、期待どおりに機能します。

<svg width="600" height="600">
于 2012-11-23T16:33:54.290 に答える