javascript - 同一页面上具有不同 div id 的多个 D3 TreeMap

Question

我正在尝试制作多个基于 D3 的 TreeMap ，但 TreeMap 仅在最后一个 div 元素的位置生成(假设我正在为 #chart1 、#chart2 和 #chart3 绘图，但只有一个 TreeMap 也在位置生成它#chart3) 但只有第一张图表的数据。我正在为不同的 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>

和图表2

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

元素的定位有问题，尝试用两个不同的定位函数换成position1和position2。

Answer 1

经过上述推荐，这是正确的:

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

图表2

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