d3画力导向图

来源：互联网发布：ember.js 教程编辑：程序博客网时间：2024/06/04 18:06
代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .axis path,.axis line{            fill:none;            stroke:black;            shape-rendering:crispEdges;        }        .axis text{            font-family:sans-serif;            font-size:11px;        }    </style></head><body>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>    <script type="text/javascript">        var width = 600;        var height = 600;        var svg = d3.select("body")                    .append("svg")                    .style("background-color","yellow")                    .attr("width",width)                    .attr("height",height)        var nodes = [            { name : "0"},            { name : "1"},            { name : "2"},            { name : "3"},            { name : "4"},            { name : "5"},            { name : "6"},            { name : "7"},        ]        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            },{                source : 1,                target : 7            }        ]        //转换数据        var force = d3.layout.force()                    .nodes(nodes)                    .links(edges)                    .size([width,height])                    .linkDistance(90)                    .charge(-400);        force.start();        console.log(nodes);        console.log(edges);        // var drag = force.drag()        //              .on("dragstart",function(d){        //                  d.fixed = false;        //              })        //              .on("dragend",function(d,i){        //                  d3.select(this).style("fill",color(i));        //              })        //              .on("drag",function(d){        //                  d3.select(this).style("fill","yellow");        //              })        //转换数据        var color = d3.scale.category20();        //绘制连线        var lines = svg.selectAll(".forceLine")                        .data(edges)                        .enter()                        .append("line")                        .attr("class","forceLine")                        .attr("stroke","black")        //绘制节点        var circles = svg.selectAll(".forceCircle")                            .data(nodes)                            .enter()                            .append("circle")                            .attr("class","forceCircle")                            .attr("r",20)                            .style("fill",function(d,i){                                return color(i);                            })                            .call(force.drag);        //绘制文字        var texts = svg.selectAll(".forceText")                        .data(nodes)                        .enter()                        .append("text")                        .attr("class","forceText")                        .attr("x",function(d){                            return d.x;                        })                        .attr("y",function(d){                            return d.y;                        })                        .attr("dy",".3em")                        .text(function(d){                            return d.name;                        })        //tick事件的监听器        force.on("tick",function(){            //更新连线的端点坐标            lines.attr("x1",function(d){                return d.source.x;            })            lines.attr("y1",function(d){                return d.source.y;            })            lines.attr("x2",function(d){                return d.target.x;            })            lines.attr("y2",function(d){                return d.target.y;            })            //更新节点坐标            circles.attr("cx",function(d){                return d.x;            })            circles.attr("cy",function(d){                return d.y;            })            //更新文字节点坐标            texts.attr("x",function(d){                return d.x;            })            texts.attr("y",function(d){                return d.y;            })        })    </script></body></html>
代码运行效果如下图所示：
这里写图片描述
还能用鼠标拖拽
这里写图片描述
阅读全文
0 0