Question

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

enter image description here

用于生成力布局的数据是源自API的JSON对象。我成功地遍历了数据结构，并生成了附加到SVG的节点（根节点及其子节点）。

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

任何帮助将不胜感激！在此先感谢!!

这是一个JS小提琴我的代码：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数组。您可以使用层次结构布局来帮助解决这个问题，但鉴于您已经编写了一个展平函数（或至少已修改过的函数），无论如何，您仍然可以使用它。

D3.js可折叠力布局：未生成链接

1 个答案: