D3学习：力导向图布局

来源：互联网发布：那些年流行的网络歌曲编辑：程序博客网时间：2024/05/17 04:25

今天一早上起来复习了会儿算法的NPC证明，好烧脑，本宝宝现在都有点而力不从心了~
到图书馆学D3，雷打不动，即使有考试也不放弃码代码~~
力导向图，之前学过一个比较复杂的，那时候按照一个demo写完了累的本宝宝半死也没怎么理解其中内涵，这回再看，感觉好多了，还是得循序渐进啊~

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>力导向图</title>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <script type="text/javascript">        var nodes = [{name:"盘锦"},                     {name:"北票"},                     {name:"锦州"},                     {name:"沈阳"},                     {name:"大连"},                     {name:"厦门"},                     {name:"北京"}];        var edges = [{source:0,target:1},                     {source:0,target:2},                     {source:0,target:3},                     {source:1,target:4},                     {source:1,target:5},                     {source:1,target:6}];        var width = 400,            height = 400;        var svg = d3.select("body")                    .append("svg")                    .attr("width", width)                    .attr("height", height);        var force = d3.layout.force()                      .nodes(nodes)                      .links(edges)                      .size([width,height])                      .linkDistance(150)//指定连线长度                      .charge([-300]);//指定相互之间的作用力                      //负电荷数        //上面的语句定义了力布局方式        //并用力布局的方式使得原始数据变成了画力导向图        //所需要的数据格式        force.start();//开始作用力        console.log(nodes);        console.log(edges);        //看控制台输出的数据，已经发生了变化        var color = d3.scale.category20();        //添加节点        var svg_nodes = svg.selectAll("circle")                           .data(nodes)                           .enter()                           .append("circle")                           .attr("r", 20)                           .attr("fill", function (d, i) {return color(i);})                           .call(force.drag);                           //call使得节点能够被拖拽        //添加连线        var svg_edges = svg.selectAll("line")                           .data(edges)                           .enter()                           .append("line")                           .attr("stroke","#ccc")                           .attr("stroke-width",1);        //添加文字        var svg_texts = svg.selectAll("text")                           .data(nodes)                           .enter()                           .append("text")                           .attr("fill","orange")                           .attr("dx", 20)                           .attr("dy", 8)                           .text(function (d) {return d.name;});        //第一次敲到这儿的时候，我打开网页看了一下效果        //本以为会有静态的图，结果是所有东西都聚在了左上角        //想想可能是因为上面只是添加了一些元素        //指定了一些相对位置以及确定的量        //但是具体的元素坐标等还是没有说明        //所以需要下面这一段代码        force.on("tick", function () {            svg_edges.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;});            svg_nodes.attr("cx", function (d) {return d.x;})                     .attr("cy", function (d) {return d.y;});            svg_texts.attr("x", function (d) {return d.x;})                     .attr("y", function (d) {return d.y;});        })        //tick：滴答滴答，鼠标触发事件        </script>    </body></html>

0 0