如何更新d3.js中的气泡图？ [英] How to Update bubble chart in d3.js?

问题描述

我设法创建一个气泡图，当它是一个单一的数据集工作正常。但是如果我需要更新它与其他数据集，出现问题。请通过 http://jsfiddle.net/9jL64/ 帮助我使用我的更新功能。

  function changebubble（root）
 {
 var node = svg.selectAll（。node）
。数据（bubble.nodes（classes（root））
 .filter（function（d）{return！d.children;}））; 
 
 node.enter（）
 .append（g）
 .attr（class，node）
 .attr function（d）{returntranslate（+ dx +，+ dy +）;}）; 
 node.select（circle）
 .transition（）
 .duration（1000）
 .attr（r，function（d）{return dr;}） 
 .style（fill，function（d，i）{return color（i）;}）; 
 
 node.transition（）。attr（class，node）
 .attr（transform，function（d）{returntranslate（+ dx + + dy +）;}）; 
 
 node.append（circle）
 .attr（r，function（d）{return dr;}）
 .style d，i）{return color（i）;}）; 
 
 node.exit（）
 .remove（）; 
 
 //返回包含根下所有叶节点的扁平层次结构。 
 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}; 
} 
  

解决方案

您需要捕获 svg：g 组元素上的输入选择，以便正确应用输入/更新/退出模式。但是，为了保持对象的稳定性，并使您的标签仍指向正确的元素，您还需要将您的基于一些感兴趣的数据属性的数据（ d.className ，它是从 d.name 生成的） p>

以下是修改后的气泡更新函数的主要部分：

  var node = svg.selectAll（。node）
 .data（
 bubble.nodes（classes（root））。filter（function（d）{return！d.children;}），
 function（d）{return d.className} //基于className的键值数据保持对象的常量
）; 
 
 //捕获输入选择
 var nodeEnter = node.enter（）
 .append（g）
 .attr（class，node ）
 .attr（transform，function（d）{
 returntranslate（+ dx +，+ dy +）; 
} 
 
 //重复使用圈子输入选择
 nodeEnter 
 .append（circle）
 .attr（r，function（d）{return dr;}）
 .style（fill，function（d，i）{return color（i）;}）
 
 //重复使用标题输入选择
 nodeEnter 
 .append（title）
 .text（function（d）{
 return d.className +：+ format（d.value）; 
} ）; 
  

完整的 FIDDLE 在这里。

我也发布了关于如果您感兴趣，可以对 svg：g 元素应用enter / update / exit模式。

I managed to create a bubble chart which works fine when it is a single dataset. But something goes wrong if I need to update it with other datasets. Please help me with my update function at http://jsfiddle.net/9jL64/.

function changebubble(root)
{
  var node = svg.selectAll(".node")
      .data(bubble.nodes(classes(root))
      .filter(function(d) { return !d.children; }));

  node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });  
  node.select("circle")
    .transition()
    .duration(1000)
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d,i) { return color(i); });

   node.transition().attr("class", "node")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

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

   node.exit()
     .remove();

// 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};
}

解决方案

This is the classic case when you need to capture the enter selection on the svg:g group element in order to apply the enter/update/exit pattern correctly. But, to keep object constancy, and so that your labels still point to the right elements, you also need to key your data based on some data property of interest (d.className, which is generated from d.name).

Here is the main segment of your revised bubble update function:

var node = svg.selectAll(".node")
    .data(
        bubble.nodes(classes(root)).filter(function (d){return !d.children;}),
        function(d) {return d.className} // key data based on className to keep object constancy
    );

// capture the enter selection
var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

// re-use enter selection for circles
nodeEnter
    .append("circle")
    .attr("r", function (d) {return d.r;})
    .style("fill", function (d, i) {return color(i);})

// re-use enter selection for titles
nodeEnter
    .append("title")
    .text(function (d) {
        return d.className + ": " + format(d.value);
    });

The complete FIDDLE is here.

I also blogged on the matter of applying the enter/update/exit pattern to svg:g elements, if you are interested.

这篇关于如何更新d3.js中的气泡图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！