1

d3 新手在这里，所以如果有什么没有意义/非常愚蠢，请提前道歉。

我目前有一个可折叠集群布局中的系统发育树，并试图解决多个父母的问题。我没有足够的积分来发布图片，所以这里是 screengrab。

在屏幕截图中，左侧的孤立节点（Moustached Grass Warbler 等）从右侧不再附加节点的链接移动。我希望重新绘制这些链接，并将孤立节点连接到其第二个父节点（15601、15602 等）。目前，节点移动到其新位置，但没有绘制任何链接。

从那以后，我发现分层布局不适用于具有多个父节点的节点，但我对 d3 的理解还不够好，无法弄清楚原因。有没有办法解决这个问题？我已经相当依赖集群布局可视化数据的方式，所以我真的宁愿保留它，而不是从这里描述的强制布局重新开始。

所以，我的问题是：在 d3.cluster 中是否可以将两个父链接绘制到一个节点？看起来确实应该如此。如果是这样，怎么做？

如果没有，任何更多有关如何复制有效集群布局的资源将不胜感激。

这是更新功能 - 如果需要更多代码部分，请告诉我：

function update(source) {
    // Compute the new tree layout.
    var nodes = tree.nodes(root);
        links = tree.links(nodes);

    nodes.forEach(function(d) {
        add_parents(d);
    });

    // Normalize for fixed-depth.
    nodes.forEach(function(d) { 
        if (d.child_count === 0) {
                d.y = h - 150
        } else {
            //do nothing
        }
    });

  // Update the nodes…
    var node = svg.selectAll("g.node")
        .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
        //this APPEARS to just cause it to update twice for no reason
        .on("click", function(d) { toggle(d); update(root); });

    nodeEnter.append("circle")
        .attr("r", node_size)
        .style("fill", function(d) { return (d.child_count > 0 && d._children) ? "#66cccc" : "#fff"; });

  //switch out commented stuff in here for vertical vs horizontal tree
    nodeEnter.append("text")
        //.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
        //.attr("dy", ".35em")
        //.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
        .attr("dy", ".5em")
        .attr("dx", function(d) { return ( (node_size(d)/16 + (d.name.length/4) + 1) + "em"); })
        .attr("text-anchor", "middle")
        .attr("transform", "rotate(45)")
        .text(function(d) { return d.name; })
        .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
    var nodeUpdate = node.transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    nodeUpdate.select("circle")
        .attr("r", node_size)
        .style("fill", function(d) { return (d.child_count > 0 && d._children) ? "#66cccc" : "#fff"; });

    nodeUpdate.select("text")
        .style("fill-opacity", 1);

  // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
        .remove();

    nodeExit.select("circle")
        .attr("r", 1e-6);

    nodeExit.select("text")
        .style("fill-opacity", 1e-6);

  // Update the links…
    var link = svg.selectAll("path.link")
        //this one prevents new link from being drawn to moved node, but links enter from the right place
        .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .style("stroke-opacity", link_opacity)
        //.style("stroke-width", link_width)
        .style("stroke", link_color)
        .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            return diagonal({source: o, target: o});
        })
        .remove();

  // Stash the old positions for transition.
    nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });

} // function update()
4

0 回答 0