異なるdiv idの同じページの複数のD3 TreeMap

Question

複数のD3ベースのツリーマップを作成しようとしていますが、ツリーマップは最後のdiv要素の場所でのみ生成されています（＃chart1、＃chart2、 chart3では、＃chart3の位置にも1つのツリーマップしか生成されませんが、最初のグラフのデータのみで生成されます。私は別のdivのidの

グラフ1

  <script type="text/javascript"> 

      var margin = {top: 10, right: 10, bottom: 10, left: -40}, 
       width = 250 - margin.left - margin.right, 
       height = 200 - margin.top - margin.bottom; 

      var color = d3.scale.category10(); 

      var treemap = d3.layout.treemap() 
       .size([width, height]) 
       .sticky(true) 
       .value(function(d) { return d.credit; }); 

      var div = d3.select("#chart1").append("div") 
       .style("position1", "relative") 
       .style("width", (width + margin.left + margin.right) + "px") 
       .style("height", (height + margin.top + margin.bottom) + "px") 
       .style("left", margin.left + "px") 
       .style("top", margin.top + "px"); 



      d3.json("sem1.json", function(error, root1) { 
       if (error) throw error; 

       var node = div.datum(root1).selectAll(".node") 
        .data(treemap.nodes) 
        .enter().append("div") 
        .attr("class", "node") 
        .call(position1) 
        .style("background", function(d) { return d.children ? color(d.name) : null; }) 
        .text(function(d) { return d.children ? null : d.name; }); 


       d3.selectAll("input").on("change", function change() { 
       var value = this.value === "count" 
        ? function() { return 1; } 
        : function(d) { return d.size; }; 
       node 
        .data(treemap.value(value).nodes) 
        .transition() 
        .duration(1500) 
        .call(position1); 
       }); 



      }); 

      function position1() { 
       this.style("left", function(d) { return d.x + "px"; }) 
        .style("top", function(d) { return d.y + "px"; }) 
        .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) 
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); 
      } 

      </script> 

とchart2

  <script type="text/javascript"> 

      var margin = {top: 10, right: 10, bottom: 10, left: -40}, 
       width = 220 - margin.left - margin.right, 
       height = 200 - margin.top - margin.bottom; 

      var color = d3.scale.category10(); 

      var treemap = d3.layout.treemap() 
       .size([width, height]) 
       .sticky(true) 
       .value(function(d) { return d.credit; }); 

      var div = d3.select("#chart2").append("div") 
       .style("position2", "relative") 
       .style("width", (width + margin.left + margin.right) + "px") 
       .style("height", (height + margin.top + margin.bottom) + "px") 
       .style("left", margin.left + "px") 
       .style("top", margin.top + "px"); 



      d3.json("sem2.json", function(error, root2) { 
       if (error) throw error; 

       var node = div.datum(root2).selectAll(".node") 
        .data(treemap.nodes) 
        .enter().append("div") 
        .attr("class", "node") 
        .call(position2) 
        .style("background", function(d) { return d.children ? color(d.name) : null; }) 
        .text(function(d) { return d.children ? null : d.name; }); 


       d3.selectAll("input").on("change", function change() { 
       var value = this.value === "count" 
        ? function() { return 1; } 
        : function(d) { return d.size; }; 
       node 
        .data(treemap.value(value).nodes) 
        .transition() 
        .duration(1500) 
        .call(position2); 
       }); 



      }); 

      function position2() { 
       this.style("left", function(d) { return d.x + "px"; }) 
        .style("top", function(d) { return d.y + "px"; }) 
        .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) 
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); 
      } 

      </script> 

ためのコードの2枚を貼り付けていますがあり要素の配置に問題がある、と試してみましたposition1とposition2の2つの異なる位置関数で変化します。ここで

Answer 1

は、上記reccomendation後、正しいものである：

グラフ1

  <script type="text/javascript"> 

      var margin = {top: 10, right: 10, bottom: 10, left: -40}, 
       width = 220 - margin.left - margin.right, 
       height = 200 - margin.top - margin.bottom; 

      var color = d3.scale.category10(); 

      var treemap1 = d3.layout.treemap() 
       .size([width, height]) 
       .sticky(true) 
       .value(function(d) { return d.credit; }); 

      var div1 = d3.select("#chart6").append("div") 
       .style("position1", "relative") 
       .style("width", (width + margin.left + margin.right) + "px") 
       .style("height", (height + margin.top + margin.bottom) + "px") 
       .style("left", margin.left + "px") 
       .style("top", margin.top + "px"); 



      d3.json("sem1.json", function(error, root1) { 
       if (error) throw error; 

       var node = div1.datum(root1).selectAll(".node") 
        .data(treemap1.nodes) 
        .enter().append("div") 
        .attr("class", "node") 
        .call(position1) 
        .style("background", function(d) { return d.children ? color(d.name) : null; }) 
        .text(function(d) { return d.children ? null : d.name; }); 


       d3.selectAll("input").on("change", function change() { 
       var value = this.value === "count" 
        ? function() { return 1; } 
        : function(d) { return d.size; }; 
       node 
        .data(treemap1.value(value).nodes) 
        .transition() 
        .duration(1500) 
        .call(position1); 
       }); 



      }); 

      function position1() { 
       this.style("left", function(d) { return d.x + "px"; }) 
        .style("top", function(d) { return d.y + "px"; }) 
        .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) 
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); 
      } 

      </script> 

chart2

<script type="text/javascript"> 

      var margin = {top: 10, right: 10, bottom: 10, left: -40}, 
       width = 220 - margin.left - margin.right, 
       height = 200 - margin.top - margin.bottom; 

      var color = d3.scale.category10(); 

      var treemap2 = d3.layout.treemap() 
       .size([width, height]) 
       .sticky(true) 
       .value(function(d) { return d.credit; }); 

      var div2 = d3.select("#chart7").append("div") 
       .style("position2", "relative") 
       .style("width", (width + margin.left + margin.right) + "px") 
       .style("height", (height + margin.top + margin.bottom) + "px") 
       .style("left", margin.left + "px") 
       .style("top", margin.top + "px"); 



      d3.json("sem2.json", function(error, root2) { 
       if (error) throw error; 

       var node = div2.datum(root2).selectAll(".node") 
        .data(treemap2.nodes) 
        .enter().append("div") 
        .attr("class", "node") 
        .call(position2) 
        .style("background", function(d) { return d.children ? color(d.name) : null; }) 
        .text(function(d) { return d.children ? null : d.name; }); 


       d3.selectAll("input").on("change", function change() { 
       var value = this.value === "count" 
        ? function() { return 1; } 
        : function(d) { return d.size; }; 
       node 
        .data(treemap2.value(value).nodes) 
        .transition() 
        .duration(1500) 
        .call(position2); 
       }); 



      }); 

      function position2() { 
       this.style("left", function(d) { return d.x + "px"; }) 
        .style("top", function(d) { return d.y + "px"; }) 
        .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) 
        .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); 
      } 

      </script>