1

我正在使用这个气泡图来构建我自己的版本。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>
4

1 回答 1

1

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

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

这里一个更好的选择是将整个东西包装在一个函数中，该函数需要加载文件，并且可能是一个 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");
于 2014-03-31T23:30:57.123 回答