D3树布局-具有子节点的子节点之间的距离

斯科蒂·布林格

尝试在D3中获取树布局,以使子节点与子节点之间的距离更近。这是代码:

var margin = {
            top: 20,
            right: 120,
            bottom: 20,
            left: 120
    },
    width = 960 - margin.right - margin.left,
    height = 800 - margin.top - margin.bottom;

    var i = 0,
            duration = 750,
            rectW = 185,
            rectH = 45;

    var tree = d3.layout.tree()
        .nodeSize([200, 40]);

    var diagonal = d3.svg.diagonal()
        .projection(function (d) {
        return [d.x + rectW / 2, d.y + rectH / 2];
    });

    var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000)
        .call(zm = d3.behavior.zoom().scaleExtent([0,1]).on("zoom", redraw))
        .append("g")
        .attr("transform", "translate(" + 30 + "," + 20 + ")");

    //necessary so that zoom knows where to zoom and unzoom from
    zm.translate([350, 20]);

    root.x0 = width / 2;
    root.y0 = 0;

    update(root);

    d3.select("#body").style("height", "800px");

    function update(source) {

        // Compute the new tree layout.
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);


        // Normalize for fixed-depth.
        nodes.forEach(function (d) {
            d.y = (d.depth * 120);
        });

        // 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.x0 + "," + source.y0 + ")";
            })
            .on("click", click);

        // Add rectangles to nodes
        nodeEnter.append("rect")
            .attr("width", function (d) {                   
                return rectW;
                //return d._children ? "lightsteelblue" : "#fff";
            })
            .attr("height", rectH)
            .attr("class", function (d) {
                return "rect-" + d.state;
            });

        // Add text to nodes
        nodeEnter.append("text")
            .attr("x", rectW / 2)
            .attr("y", rectH / 2)
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function (d) {
                return d.name;
            });

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

        nodeUpdate.select("rect")
            .attr("width", rectW)
            .attr("height", rectH)
            .attr("class", function (d) {
                return "rect-" + d.state;
            });

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

        // Update the links…
        var link = svg.selectAll("path.link")
            .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", function (d) {
                return "link " + d.target.dest;
            })
            .attr("x", rectW / 2)
            .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();


        // Update the link labels…
        var linkLabel = svg.selectAll("text.link-label")
            .data(links, function (d) {
                return d.target.id;
            });

        // Enter any new links at the parent's previous position.
        linkLabel.enter().insert("text", "path")
            .text(function (d) {
                return (d.target.state !== "open") ? null : "If " + d.target.dest;
            })
            .attr("class", function (d) {
                return "link-label " + d.target.dest;
            })
            .attr("x",  function (d) {
                return d.target.x + rectW / 2;
            })
            .attr("y", function (d) {
                return d.target.y + rectH * 2 - 30;
            })              
            .attr('text-anchor', 'middle')
            .style("fill-opacity", 0);;

        // Transition link labels
        linkLabel.transition()
            .delay(duration)
            .style("fill-opacity", 1);


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

    // Toggle children on click.
    function click(d) {
        return false;
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update(d);
    }

    //Redraw for zoom
    function redraw() {
        //console.log("here", d3.event.translate, d3.event.scale);
        svg.attr("transform",
            "translate(" + d3.event.translate + ")"
            + " scale(" + d3.event.scale + ")");
    }

这是上面代码的jsbin我想看到的是海军色的“节点1”和“节点2”更加靠近,同时保留了没有子节点的节点(灰色节点)之间的距离。

这可能吗,我将如何做?

斯科蒂·布林格

我找到了答案。这是分离方法。这给了我我想要的东西:

tree.separation(function separation(a, b) {
            return a.parent == b.parent ? 1 : 1.5;
        });

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3 树 - 调整第一级父节点和子节点之间的水平距离

来自分类Dev

是否可以在d3 js中仅为树布局的子节点绘制子节点的虚线链接

来自分类Dev

是否可以在d3 js中仅为树布局的子节点绘制子节点的虚线链接

来自分类Dev

从具有切换节点的D3树布局创建jsTree

来自分类Dev

子节点可以使用D3在可折叠力布局中具有多个父节点吗

来自分类Dev

我的D3树布局的节点之间的间隙越来越大

来自分类Dev

D3强制布局,使树中的分支而不是节点移动

来自分类Dev

从d3js树布局中删除节点及其子节点

来自分类Dev

如何增加D3可折叠树中子节点之间的距离?

来自分类Dev

在二叉树中计算具有特定数量的子节点的节点?

来自分类Dev

根据节点具有的子节点数量对无序树进行排序

来自分类Dev

D3:方向图类似于树的布局,但带有反向链接

来自分类Dev

动态地将节点添加到D3树布局请求(切换时)

来自分类Dev

带有可拖动节点的 D3 布局

来自分类Dev

d3缩进树使用子级关闭其他节点,并仅打开特定节点

来自分类Dev

php树获取子节点的所有父节点的列表

来自分类Dev

D3可折叠树的不同节点颜色

来自分类Dev

D3可折叠树,节点合并问题

来自分类Dev

D3树方形节点不在所需位置

来自分类Dev

删除某些节点后更新D3树

来自分类Dev

方案-二叉搜索树的内部节点数,该内部节点恰好具有一个子节点

来自分类Dev

D3强制布局:如何设置每个节点的大小?

来自分类Dev

d3强制使用节点组进行布局

来自分类Dev

圆包作为D3力布局的节点

来自分类Dev

d3在节点中强制布局链接位置

来自分类Dev

D3强制布局节点属性未正确更新

来自分类Dev

如何替换d3强制布局中的节点?

来自分类Dev

d3以可预测的顺序强制布局节点

来自分类Dev

圆包作为D3力布局的节点

Related 相关文章

  1. 1

    d3 树 - 调整第一级父节点和子节点之间的水平距离

  2. 2

    是否可以在d3 js中仅为树布局的子节点绘制子节点的虚线链接

  3. 3

    是否可以在d3 js中仅为树布局的子节点绘制子节点的虚线链接

  4. 4

    从具有切换节点的D3树布局创建jsTree

  5. 5

    子节点可以使用D3在可折叠力布局中具有多个父节点吗

  6. 6

    我的D3树布局的节点之间的间隙越来越大

  7. 7

    D3强制布局,使树中的分支而不是节点移动

  8. 8

    从d3js树布局中删除节点及其子节点

  9. 9

    如何增加D3可折叠树中子节点之间的距离?

  10. 10

    在二叉树中计算具有特定数量的子节点的节点?

  11. 11

    根据节点具有的子节点数量对无序树进行排序

  12. 12

    D3:方向图类似于树的布局,但带有反向链接

  13. 13

    动态地将节点添加到D3树布局请求(切换时)

  14. 14

    带有可拖动节点的 D3 布局

  15. 15

    d3缩进树使用子级关闭其他节点,并仅打开特定节点

  16. 16

    php树获取子节点的所有父节点的列表

  17. 17

    D3可折叠树的不同节点颜色

  18. 18

    D3可折叠树,节点合并问题

  19. 19

    D3树方形节点不在所需位置

  20. 20

    删除某些节点后更新D3树

  21. 21

    方案-二叉搜索树的内部节点数,该内部节点恰好具有一个子节点

  22. 22

    D3强制布局:如何设置每个节点的大小?

  23. 23

    d3强制使用节点组进行布局

  24. 24

    圆包作为D3力布局的节点

  25. 25

    d3在节点中强制布局链接位置

  26. 26

    D3强制布局节点属性未正确更新

  27. 27

    如何替换d3强制布局中的节点?

  28. 28

    d3以可预测的顺序强制布局节点

  29. 29

    圆包作为D3力布局的节点

热门标签

归档