D3学习：集群布局

最新推荐文章于 2024-06-18 09:37:37 发布

一只从零开始学习的小蜗牛

最新推荐文章于 2024-06-18 09:37:37 发布

阅读量402

点赞数

分类专栏： D3 文章标签： d3

本文链接：https://blog.csdn.net/zkyrjsxdm/article/details/50411815

版权

D3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天这段代码敲完了有很多的疑问，暂且记下代码，之后慢慢想一下我不懂的地方

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>集群布局学习</title>
        <style type="text/css">
        .node {
            font: 12px sans-serif;
        }

        .link {
            fill:none;
            stroke:#ccc;
            stroke-width:1.5px;
        }

        .node circle {
            fill:#fff;
            stroke:steelblue;
            stroke-width:1.5px;
        }

        </style>
        <script type="text/javascript" src="../d3/d3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">

        var width = 500,
            height = 500;

        var cluster = d3.layout.cluster()
                        .size([width, height - 200]);

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

        var svg = d3.select("body")
                    .append("svg")
                    .attr("height", height)
                    .attr("width", width)
                    .append("g")
                    .attr("transform", "translate(40,0)");

        d3.json("MyCity.json", function (error, root) {
            var nodes = cluster.nodes(root);
            var links = cluster.links(nodes);

            console.log(nodes);
            console.log(links);

            var link = svg.selectAll(".link")
                          .data(links)
                          .enter()
                          .append("path")
                          .attr("class", "link")
                          .attr("d", diagonal);

            var node = svg.selectAll(".node")
                          .data(nodes)
                          .enter()
                          .append("g")
                          .attr("class", "node")
                          .attr("transform", function (d) {return "translate(" + d.y + "," + d.x + ")";});
                      node.append("circle")
                          .attr("r", 4.5);
                      node.append("text")
                          .attr("dx", function (d) {return d.children ? -28 : 8;})
                          .attr("dy", 3)
                          .text(function (d) {return d.name;});
        })
        </script>
    </body>
</html>