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

本文链接：https://blog.csdn.net/tianxuzhang/article/details/14228703

其实就是简单的力导向图

只是加载了json文件

设置了分层的颜色

设置化学键分隔线

//(1)平方根比例尺

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

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

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

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

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

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

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

<!DOCTYPE html>  
<html>  
  <head>  
        <meta charset="utf-8">  
        <title>testD3-29-Molecule.html</title>  
        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
    <style type="text/css">  
    .link line {
  stroke: #696969;
}
/* 分隔线的格式 透明的 */
.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #000;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}
</style>  
    </head>  
    <body>  
        <script type="text/javascript">
        var width = 960,
    height = 500;

var color = d3.scale.category20();
//(1)平方根比例尺
var radius = d3.scale.sqrt()
    .range([0, 6]);//值域

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

var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(function(d) {//(2)连线是两个圆半径之和+20那么长 
   	 	return radius(d.source.size) //数据源里的size就是半径
    	+ radius(d.target.size) + 20; 
    });

d3.json("http://localhost:8080/spring/D3data/graph.json", function(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");

  link.append("line")
      .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 2 + "px"; });
//(3)只要连线大于2就加一条分隔线
//怎么添加多条分隔线呢？
  link.filter(function(d) {//基于数据过滤的选择。
   		return d.bond > 1; 
   }).append("line")
      .attr("class", "separator");//添加一条分隔线
//常规的添加节点
  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);
//常规的添加圆点
  node.append("circle")
      .attr("r", function(d) { 
      		return radius(d.size); //(4)根据圆圈的种类的大小设置大小 
      		})
      .style("fill", function(d) { 
      		return color(d.atom); //根据圆圈的种类设置颜色
      });

  node.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")//在圆圈中加上数据
      .text(function(d) { return d.atom; });
//常规的打点
  function tick() {
    link.selectAll("line")
        .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 + ")";
      });
  }
});
        </script>  
  
    </body>  
</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}
]
}