devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【D3.js数据可视化系列教程】（三十一）-- 力导向图之分子式_d3两个圆连线

作者：从前慢现在也慢 | 2024-02-23 01:37:38

赞

踩

d3两个圆连线

其实就是简单的力导向图

只是加载了json文件

设置了分层的颜色

设置化学键分隔线

//(1)平方根比例尺

  1. var radius = d3.scale.sqrt()
  2.     .range([0, 6]);//值域

(2)连线是两个圆半径之和+20那么长 

  1. .linkDistance(function(d) {//(2)连线是两个圆半径之和+20那么长 
  2.       return radius(d.source.size) //数据源里的size就是半径
  3.      + radius(d.target.size) + 20; 
  4.     });

(3)只要连线大于2就加一条分隔线

  1. //怎么添加多条分隔线呢？
  2.   link.filter(function(d) {//基于数据过滤的选择。
  3.      return d.bond > 1; 
  4.    }).append("line")
  5.       .attr("class", "separator");//添加一条分隔线

(4)根据圆圈的种类的大小设置大小 

  1. node.append("circle")
  2.       .attr("r", function(d) { 
  3.         return radius(d.size); //(4)根据圆圈的种类的大小设置大小 
  4.         })
  5.       .style("fill", function(d) { 
  6.         return color(d.atom); //根据圆圈的种类设置颜色
  7.       });

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.         <meta charset="utf-8">  
  5.         <title>testD3-29-Molecule.html</title>  
  6.         <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
  7.     <style type="text/css">  
  8.     .link line {
  9.   stroke: #696969;
  10. }
  11. /* 分隔线的格式 透明的 */
  12. .link line.separator {
  13.   stroke: #fff;
  14.   stroke-width: 2px;
  15. }
  16.  
  17. .node circle {
  18.   stroke: #000;
  19.   stroke-width: 1.5px;
  20. }
  21.  
  22. .node text {
  23.   font: 10px sans-serif;
  24.   pointer-events: none;
  25. }
  26. </style>  
  27.     </head>  
  28.     <body>  
  29.         <script type="text/javascript">
  30.         var width = 960,
  31.     height = 500;
  32.  
  33. var color = d3.scale.category20();
  34. //(1)平方根比例尺
  35. var radius = d3.scale.sqrt()
  36.     .range([0, 6]);//值域
  37.  
  38. var svg = d3.select("body").append("svg")
  39.     .attr("width", width)
  40.     .attr("height", height);
  41.  
  42. var force = d3.layout.force()
  43.     .size([width, height])
  44.     .charge(-400)
  45.     .linkDistance(function(d) {//(2)连线是两个圆半径之和+20那么长 
  46.    	 	return radius(d.source.size) //数据源里的size就是半径
  47.     	+ radius(d.target.size) + 20; 
  48.     });
  49.  
  50. d3.json("http://localhost:8080/spring/D3data/graph.json", function(graph) {
  51.   force
  52.       .nodes(graph.nodes)
  53.       .links(graph.links)
  54.       .on("tick", tick)
  55.       .start();
  56.  
  57.   var link = svg.selectAll(".link")
  58.       .data(graph.links)
  59.     .enter().append("g")
  60.       .attr("class", "link");
  61.  
  62.   link.append("line")
  63.       .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; });
  64. //(3)只要连线大于2就加一条分隔线
  65. //怎么添加多条分隔线呢？
  66.   link.filter(function(d) {//基于数据过滤的选择。
  67.    		return d.bond > 1; 
  68.    }).append("line")
  69.       .attr("class", "separator");//添加一条分隔线
  70. //常规的添加节点
  71.   var node = svg.selectAll(".node")
  72.       .data(graph.nodes)
  73.     .enter().append("g")
  74.       .attr("class", "node")
  75.       .call(force.drag);
  76. //常规的添加圆点
  77.   node.append("circle")
  78.       .attr("r", function(d) { 
  79.       		return radius(d.size); //(4)根据圆圈的种类的大小设置大小 
  80.       		})
  81.       .style("fill", function(d) { 
  82.       		return color(d.atom); //根据圆圈的种类设置颜色
  83.       });
  84.  
  85.   node.append("text")
  86.       .attr("dy", ".35em")
  87.       .attr("text-anchor", "middle")//在圆圈中加上数据
  88.       .text(function(d) { return d.atom; });
  89. //常规的打点
  90.   function tick() {
  91.     link.selectAll("line")
  92.         .attr("x1", function(d) { return d.source.x; })
  93.         .attr("y1", function(d) { return d.source.y; })
  94.         .attr("x2", function(d) { return d.target.x; })
  95.         .attr("y2", function(d) { return d.target.y; });
  96.  
  97.     node.attr("transform", function(d) {
  98.      return "translate(" + d.x + "," + d.y + ")";
  99.       });
  100.   }
  101. });
  102.         </script>  
  103.   
  104.     </body>  
  105. </html>


 {
  "nodes": [
    {"atom": "C", "size": 12},
    {"atom": "C", "size": 12},
    {"atom": "C", "size": 12},
    {"atom": "N", "size": 14},
    {"atom": "H", "size": 1},
    {"atom": "O", "size": 16},
    {"atom": "O", "size": 16},
    {"atom": "H", "size": 1},
    {"atom": "H", "size": 1},
    {"atom": "H", "size": 1},
    {"atom": "H", "size": 1},
    {"atom": "H", "size": 1},
    {"atom": "H", "size": 1}
  ],
  "links": [
    {"source": 0, "target": 1,  "bond": 1},
    {"source": 1, "target": 2,  "bond": 1},
    {"source": 1, "target": 3,  "bond": 1},
    {"source": 2, "target": 5,  "bond": 4},
    {"source": 2, "target": 6,  "bond": 1},
    {"source": 1, "target": 4,  "bond": 1},
    {"source": 3, "target": 10, "bond": 1},
    {"source": 3, "target": 11, "bond": 1},
    {"source": 0, "target": 7,  "bond": 1},
    {"source": 0, "target": 8,  "bond": 1},
    {"source": 0, "target": 9,  "bond": 1},
    {"source": 5, "target": 12, "bond": 1}
  ]
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/132754
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号