时间戳

首页 > 解决方案 > D3 js - 是否可以在树节点之间绘制直线？

d3.js - D3 js - 是否可以在树节点之间绘制直线？

问题描述

我创建了一个水平树形图，如下图所示。我想要节点之间的直线。节点之间的曲线在 d3 js 中是默认的。我在谷歌上看到了一些答案，但没有找到任何令人满意的结果。那么d3 js中的节点之间可以画直线吗？如果是，那么我该怎么做？

在此处输入图像描述

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <script src="https://d3js.org/d3.v3.min.js"></script>
   

    <style>
        .node circle {
            fill: #ff9900;
            stroke: #ff9900;
            stroke-width: 1px;
        }
        
        .node text {
            font: 16px sans-serif;
        }
        
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
</head>

<body>

    <script language="javascript">
        var treeData = [{
            "name": "1",
            "parent": "null",
            "children": [{
                "name": "2",
                "parent": "Persons",
                "children": [{
                    "name": "3",
                    "parent": "Country of residence"
                }, {
                    "name": "4",
                    "parent": "Country of residence"
                }, {
                    "name": "5",
                    "parent": "Country of residence"
                }, {
                    "name": "6",
                    "parent": "Country of residence"
                }]
            }]
        }];

        // ************** Generate the tree diagram  *****************
        var margin = {
                top: 20,
                right: 120,
                bottom: 20,
                left: 120
            },
            width = 960 - margin.right - margin.left,
            height = 500 - margin.top - margin.bottom;

        var i = 0;

        var tree = d3.layout.tree().size([height, width]);

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

        var line = d3.svg.line()
            .x(function(d) {
                return d.lx;
            })
            .y(function(d) {
                return d.ly;
            });

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



        root = treeData[0];

        update(root);

        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 * 180;
            });

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

            // Enter the nodes.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            nodeEnter.append("circle")
                .attr("r", 40)
                .style("fill", "#ff9900");



            // append icon inside circle
            nodeEnter.append("image")
                .attr("xlink:href", "http://localhost/d3/user2.jpg")
                .attr("x", "-18px")
                .attr("y", "-18px")
                .attr("width", "35px")
                .attr("height", "35px");


            nodeEnter.append("text")
                .attr("x", function(d) {
                    return d.children || d._children ? -40 : -50;
                })
                .attr("y", function(d) {
                    return d.children || d._children ? 55 : 55;
                })
                .attr("dy", ".35em")
                .attr("text-anchor", function(d) {
                    return d.children || d._children ? "start" : "start";
                })
                .text(function(d) {
                    return d.name;
                })
                .style("fill-opacity", 1);

            // Declare the links…
            var link = svg.selectAll("path.link")
                .data(links, function(d) {
                    return d.target.id;
                });

            // Enter the links.
            link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", diagonal);


        }
    </script>
</body>
</body>

</html>

标签： d3.js

解决方案

定义你的行：

        var line = d3.svg.line()
            .x(function(d) {
                return d.y; // because tree is horizontal
            })
            .y(function(d) {
                return d.x; // because tree is horizontal
            });

将您的链接函数更改为此，因为 d3.svg.line() 将点数组作为参数

希望这可以帮助

        // Enter the links.
        link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function(d) {
                return line([d.source, d.target]);
            });


<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <script src="https://d3js.org/d3.v3.min.js"></script>
   

    <style>
        .node circle {
            fill: #ff9900;
            stroke: #ff9900;
            stroke-width: 1px;
        }
        
        .node text {
            font: 16px sans-serif;
        }
        
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
</head>

<body>

    <script language="javascript">
        var treeData = [{
            "name": "1",
            "parent": "null",
            "children": [{
                "name": "2",
                "parent": "Persons",
                "children": [{
                    "name": "3",
                    "parent": "Country of residence"
                }, {
                    "name": "4",
                    "parent": "Country of residence"
                }, {
                    "name": "5",
                    "parent": "Country of residence"
                }, {
                    "name": "6",
                    "parent": "Country of residence"
                }]
            }]
        }];

        // ************** Generate the tree diagram  *****************
        var margin = {
                top: 20,
                right: 120,
                bottom: 20,
                left: 120
            },
            width = 960 - margin.right - margin.left,
            height = 500 - margin.top - margin.bottom;

        var i = 0;

        var tree = d3.layout.tree().size([height, width]);

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

        var line = d3.svg.line()
            .x(function(d) {
                return d.y;
            })
            .y(function(d) {
                return d.x;
            });

        var svg = d3.select("body").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



        root = treeData[0];

        update(root);

        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 * 180;
            });

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

            // Enter the nodes.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function(d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            nodeEnter.append("circle")
                .attr("r", 40)
                .style("fill", "#ff9900");



            // append icon inside circle
            nodeEnter.append("image")
                .attr("xlink:href", "http://localhost/d3/user2.jpg")
                .attr("x", "-18px")
                .attr("y", "-18px")
                .attr("width", "35px")
                .attr("height", "35px");


            nodeEnter.append("text")
                .attr("x", function(d) {
                    return d.children || d._children ? -40 : -50;
                })
                .attr("y", function(d) {
                    return d.children || d._children ? 55 : 55;
                })
                .attr("dy", ".35em")
                .attr("text-anchor", function(d) {
                    return d.children || d._children ? "start" : "start";
                })
                .text(function(d) {
                    return d.name;
                })
                .style("fill-opacity", 1);

            // Declare the links…
            var link = svg.selectAll("path.link")
                .data(links, function(d) {
                    return d.target.id;
                });

            // Enter the links.
            link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", function(d) { return line([d.source, d.target])});


        }
    </script>
</body>
</body>

</html>

推荐阅读