javascript - 使用 d3.js 附加多个气泡云图

Question

我正在使用这个气泡图来构建我自己的版本。 http://bl.ocks.org/mbostock/4063269 在单个页面上附加图表的多个副本进行比较似乎只附加图表的一个副本。它可能会在另一个图表上附加相同的图表。我的问题是这段代码中的什么导致只显示一张图表？当在同一页面上使用相同代码(图表)的多个副本时，如何避免此问题？是否有指导方针或一些基本原则来防止这种情况发生？

 <script>

var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20b();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("DataGreatEnglishWriters.json", function(error, root) {
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });

  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};
}

d3.select(self.frameElement).style("height", diameter + "px");

</script>
<script>

var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20b();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("Data.json", function(error, root) {
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }))
    .enter().append("e")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("stroke" , "grey")
      .style("fill", function(d) { return color(d.packageName); });

  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
});

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }

  recurse(null, root);
  return {children: classes};
}

d3.select(self.frameElement).style("height", diameter + "px");

</script>

Answer 1

快速查看您的代码，您似乎只是在同一范围内重复相同的代码两次。这意味着您第二次说 var svg = ... 时，您将覆盖 svg 的值。因为加载回调函数是closures ，它们都将引用 svg 最后定义的值，第二次加载将覆盖第一个。

发生这种覆盖的部分原因是 D3 的核心概念是，如果可能的话，它将重用现有的 DOM 节点 - 请参阅 Thinking with Joins 。因此，加载的第二个文件在 svg 中查找 .node 元素，找到第一个集合，并将它们与新数据一起重用。

这里更好的选择是将整个内容包装在一个函数中，该函数需要加载文件，并且可能有一个 DOM 目标来将 SVG 附加到:

function addChart(file, target) {
   var svg = d3.select(target).append('svg');
   // ...

   d3.json(file, function() {
       // ...
   });
}

addChart("DataGreatEnglishWriters.json", "div.foo");
addChart("Data.json", "div.bar");