Mehrere D3 TreeMap auf der gleichen Seite mit verschiedenen Div-IDs

Question

Ich versuche, mehrere D3-basierte Treemap zu machen, aber die Baumkarte erzeugt nur an der Stelle für letzte div-Element (sagen wir für # chart1, # chart2 und # chart3, aber nur eine Treemap generiert das auch an der Position von # chart3), aber nur mit den Daten des ersten Charts. Ich bin Einfügen des zwei Stückes Codes für verschiedenen div id des

chart1

  <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> 

und 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> 

Es gibt ein Problem mit der Positionierung des Elements, und versuche, Ändern mit zwei verschiedenen Positionsfunktionen zu Position1 und Position2.

Answer 1

Hier ist die richtige, nach oben reccomendation:

chart1

  <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>