d3（データ駆動型ドキュメント）の変更

2012年に発行されたMike Devarの書籍「Getting started with D3」からD3の学習を開始しました。私は大学のプロジェクトでいくつかのD3の例を作成する必要がありました。私はすでに3年前に本を上ったので、始めるには良い場所です。しかし、私は最新のD3バージョン（4.6.0）をダウンロードしましたが、本書のいくつかの例がそれ以上動作しないことに気付きました。d3（データ駆動型ドキュメント）の変更

私は、最新のバージョンと本のサンプルに含まれていたバージョンの両方で次の例をテストしました。古いバージョン（4.5.1）では動作しますが、新しいバージョンでは動作しません。バージョンの変更をリストするサイトを見つけることができないので、コードのどの部分を変更する必要があるかこの例は最新バージョンで動作しますか？

<!DOCTYPE html> 
<html> 
<head> 
    <title>D3</title> 
    <meta charset="utf-8"/> 
    <script type="text/javascript" src="d3.js"></script> 
    <script> 
     function draw(data) { 
      "use strict"; 

      var margin = 50, 
       width = 700, 
       height = 300, 
       x_extent = d3.extent(data, function(d) {return d.collision_with_injury}), 
       y_extent = d3.extent(data, function(d) {return d.dist_between_fail}); 

      var x_scale = d3.scale.linear() 
          .range([margin, width-margin]) 
          .domain(x_extent); 

      var y_scale = d3.scale.linear() 
          .range([height-margin, margin]) 
          .domain(y_extent); 

      d3.select("body") 
       .append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .selectAll("circle") 
       .data(data) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d){return x_scale(d.collision_with_injury)}) 
       .attr("cy", function(d){return y_scale(d.dist_between_fail)}) 
       .attr("r", 5); 
      } 
    </script> 
</head> 
<body> 
    <script> 
     d3.json('data/bus_perf.json', draw); 
    </script> 
</body> 
</html>

出典

2017-02-21 rock_crusher