javascript - D3.js 可折叠力布局 : Links are not being generated

Question

我正在尝试生成类似于此示例的可折叠力布局:http://bl.ocks.org/mbostock/1062288 :

用于生成强制布局的数据是一个来自 API 的 JSON 对象。我能够成功地遍历数据结构，并生成附加到 SVG 的节点(根节点及其子节点)。

但是，问题在于将父节点链接到它们的子节点。 没有生成链接，我的链接变量返回一个空数组。与示例相比，我很确定这个问题与我的应用程序中的数据结构有关，所以我将发布我的 JS 代码和每个节点的数据结构。

任何帮助将不胜感激!提前致谢!!

这是我的代码的 JS Fiddle:http://jsfiddle.net/tmzjW/

这是我的 JS 代码:

//Force Layout Code
var w = 607,
    h = 500,
    node,
    link,
    root;

var force = d3.layout.force()
    .on("tick", tick)
    .size([w, h]);

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

function initiateForceJS(currentURL) {
    //Generate the URL
    forceURL = currentURL + ".json?jsonp=?";
    $('#commentArea').show();
    $.getJSON(forceURL,handleRequest2);
    function handleRequest2(json) {
        //Set the root as the first object returned
        root = json[1]['data']['children'][0];
        update();
    }
}

function update() {
  nodes = flatten(root),
  links = d3.layout.tree()
            .sort(null)
            .children(function(d) {return (!d['replies']['data']['children']|| d['replies']['data']['children'].length === 0) ? null : d['replies']['data']['children'];})
            .links(nodes);

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

  // Update the links…
  link = vis.selectAll("line.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links.
  link.enter().insert("svg:line", ".node")
      .attr("class", "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; });

  // Exit any old links.
  link.exit().remove();

  // Update the nodes…
  node = vis.selectAll("circle.node")
      .data(nodes, function(d) {return d.id; })
      .style("fill", color);

  // Enter any new nodes.
  node.enter().append("svg:circle")
      .attr("class", "node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return Math.sqrt(d.ups) || 4.5; })
      .style("fill", color)
      //.on("click", click)
      .call(force.drag);

  // Exit any old nodes.
  node.exit().remove();
  //This will add the name of the character to the node

  node.append("comment").text(function(d) { return d.body });
  //This will put the comment in the Comment Area div
  node.on("mouseover", function() {
    var currentNode = d3.select(this);
    var currentTitle = currentNode.select("comment").text();
    $('#commentArea').html('<p>' + currentTitle + '</p>')  
  });
} 


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("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

// Color leaf nodes orange, and packages white or blue.
function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}
// Returns a list of all nodes under the root.
function flatten(root) {
  var nodes = [], i = 0;
  function recurse(node) {

    if (node['data']['replies'] != "" && node['kind'] != "more") {
        node['data']['replies']['data']['children'].forEach(recurse);
    }
    if (node['kind'] !="more") {
        //Add an ID value to the node starting at 1
        node.data.id = ++i;
        var comment = node.data;
        nodes.push(comment);
    }
  }
  recurse(root);
  return nodes;
}

Answer 1

问题是 hierarchy.links函数不观察您设置的子访问器；它完全依赖于节点的 children 属性。这在原始示例中有效，因为该示例使用标准的分层节点结构(每个节点上有一个 children 数组)。它不适用于您的情况，因为您使用的是非标准结构(由第三方 API 定义)。

links 方法不观察子访问器，因为当您在数据上调用层次结构布局(例如树布局)时，它会根据您的子访问器为您填充 children 属性定义;它会自动将您的非标准输入数据映射到标准格式。但是，由于您实际上并未在此处使用层次结构布局，因此它没有机会将节点映射到标准格式，因此 hierarchy.links 不返回任何结果——没有节点具有 children 数组。

这里的另一个问题是您的 root 节点实际上没有任何回复，因此没有根节点的子节点。 (有 root.data.replies.data.children，但没有 root.replies.data.children，因为您的子访问器已定义。)

我认为这里要做的最简单的事情是将您的数据映射到一个更简单的层次结构，其中子项被定义为 children 数组。您也许可以使用层次结构布局来帮助解决这个问题，但鉴于您已经编写了一个展平函数(或至少修改了一个)，无论如何您已经完成了大部分工作。