力导向图link直接加提示

最新推荐文章于 2022-01-15 19:27:30 发布

loganyang123

最新推荐文章于 2022-01-15 19:27:30 发布

阅读量2.1k

点赞数

分类专栏： d3 数据可视化文章标签： d3 数据可视化 d3 force

本文链接：https://blog.csdn.net/loganyang123/article/details/17613605

版权

数据可视化同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
/*
.node {
stroke: #ffffff;
stroke-width: 0.1px;
}
*/
.link {
stroke: #999;
stroke-opacity: .6;
}

</style>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<script src="d3.min.js"></script>
<script>

var width = 960,
    height = 500;

var colors = d3.scale.category20();

var force = d3.layout.force()
    .charge(-320)
    .linkDistance(100)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("datas.json", function(error, graph) {
force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("g")
      .attr("class", "link")
      .append("line")
      .attr("title", function(d) { return d.value; })
      //.append("line")
      //.attr("class", "link")
      .attr("id", function(d) { return ("id"+d.value); })
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
      var ts =svg.selectAll(".link");
      ts.append("text")
   .attr("transform", function(d) {
              return "translate(" + (d.source.x+d.target.x)/2 + "," + (d.source.y+d.target.y)/2 + ")";
      })
      //.style("text-anchor" , "middle")
      //.style("position","relative")
      //.attr("x", 12)
      //.attr("dy", ".35em")
      /*.append('textPath')
      .attr({//引用路径
        'xlink:href': function(d) { return "#id"+d.value+""; }
      })*/
     .text(function(d) { return d.value; });

    /*
    var textPt=svg.selectAll(".link");
     .data(graph.links)
     .enter().append("path")
   .attr({
        id: function(d) { return "id"+d.value; },
        d: function(d) { return ("M"+d.source.x+" "+d.source.y+" L"+d.target.x+" "+d.target.y); }
      })
   .style({
        fill: 'none',
        stroke: 'green',
        'stroke-width': 3
     });

   textPt.append('text')
    //.attr('x', 20)
    //.attr('y', 20)
   .attr("transform", function(d) {
              return "translate(" + (d.source.x+d.target.x)/2 + "," + (d.source.y+d.target.y)/2 + ")";
      })
    .style('color', 'red')
   .style('fill', 'steelblue')
    .style('font-size', '15px')
    .style('font-weight', 'bold')
    .append('textPath')
    .attr({//引用路径
        'xlink:href': function(d) { return "#id"+d.value+""; }
    })
    .text(function(d) { return d.value; });*/

var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

node.append("circle")
      .attr("r", 10)
      .style("fill", function(d) { return colors(d.group); });

node.append("title")
      .text(function(d) { return d.name});
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });


/*force.on("tick", function() {
    link.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; });
    node
      .attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
      });
});*/
function tick() {//打点更新坐标
link
      .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; });

node
      .attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
      });
      /*
      node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });*/
}

});

</script>
</body>

</html>

========================datas.json=====================

{
"nodes":[
    {"name":"Myriel1","group":1},
    {"name":"Labarre2","group":2},
    {"name":"Tholomyes3","group":3},
    {"name":"Mme.Thenardier4","group":4},
    {"name":"Cosette5","group":5},
   {"name":"morgan6","group":6}
],
"links":[
    {"source":2,"target":3,"value":1},
    {"source":2,"target":4,"value":2},
    {"source":2,"target":5,"value":3}
   ]
}

loganyang123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
力导向图link直接加提示

New Document /*.node { stroke: #ffffff; stroke-width: 0.1px;}*/.link { stroke: #999; stroke-opacity: .6;} var width = 960, height = 500;
复制链接

扫一扫