Question

我正在使用强制布局和树层次结构。

它几乎可以工作，它添加节点和链接，但它们不可见。可能我错过了一些微不足道的东西，但我花了太多时间在这上面...... 非常感谢任何帮助。

在此模型中，单击后，第三个节点应添加到root。

var width = 960,
    height = 500,
    root;

var force = d3.layout.force()
   .linkDistance(80)
    .charge(-320)
    .gravity(0.05)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("#myviz").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

var mydata = '{ "name": "start_bubble", "children": [  {   "name":     "child_O1", "size": 31812},{   "name": "child_O2", "size": 31812}]}';
var myadd = '{"name": "new_child", "size": 100}';

root = JSON.parse( mydata); 
myaddparsed = JSON.parse( myadd); 

update();
force.start();

function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);

  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node")

    .style("stroke-width",2)
    .attr("class", "link");

  // Update nodes.
  node = node.data(nodes, function(d) { return d.id; });

  node.exit().remove();

    var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click)
      .call(force.drag);

  nodeEnter.append("circle")
      .attr("r", function(d) { return Math.sqrt(d.size) / 5 || 14.5; });

  nodeEnter.append("text")
      .attr("dy", "2.3em")
    .text(function(d) { return d.name; });

  node.select("circle")
      .style("fill", color);
  force.start();
}

function tick() {
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

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

function color(d) {
  return d._children ? "#3182bd" // collapsed package
      : d.children ? "#c6dbef" // expanded package
      : "#fd8d3c"; // leaf node
    }

// Toggle children on click.
 function click(d) {
  if  (d3.event.defaultPrevented) return; // ignore drag
  if (d.children) {
    //    d._children = d.children; remove for testing
    //    d.children = null; removed for testing

root.children[2]=myaddparsed; //add third node

  } else {
    //    d.children = d._children; removed for tesing
    //    d._children = null;  removed for testing

root.children[2]=myaddparsed; //add third node

  }
  update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

  recurse(root);
   return nodes;
}

http://jsfiddle.net/jo636df/o81xxmjm/

Answer 1

你来到stackoverflow，你说：＆＃34;我使用i增加recurse的值来索引我的数据。＆＃34;但是你不能保持对flatten的调用之间的价值。你没有提供独特性。你甚至不想告诉D3你有新的数据。相反，你将i重置为0，立即用++i将其递增1，将其设置在新元素上，并且当你已经有另一个元素时，你要求D3确定你的新元素确实是新元素id等于1。

您需要确保id确实是唯一的。作为快速修复，您可以将i拉到外部上下文，以避免将其重置为零。这是 fiddle 。

将节点添加到树力布局 - 几乎正常工作

1 个答案: