D3.js 以圆做点绘制力图（一）

浏览数：199 / 时间：2015年06月09日

SVG是什么？

如何在SVG上绘制一个圆？

如何在SVG上绘制一条线？

力图的基本属性有哪些？

这些问题将由本文来一一解答。

在代码方面，我们沿用上文的网页框架，把body里面的js替换成现在的js即可。

SVG

SVG，可缩放的矢量图，我们以后所绘制的数据展示图大都是在SVG这个大容器内完成的，它相当于画布。创建SVG，就是有利于导出、保存绘制好的图形。

简单的SVG标签格式 <svg width="500" height="50"></svg>，在SVG标签中可以嵌入很多可见元素，包括 rect、circle、ellipse、line、text和path。

下面，我们在body中创建一个js标签，在里面创建一个svg对象，代码如下：

<span style="font-size:14px;">var w = 500;
var h = 500;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)          //设置宽度
  .attr("height", h);        //设置高度

</span>

绘制圆

在svg内添加circle元素，先介绍下circle的基本属性：cx 圆心x坐标 cy圆心y坐标 r半径

接下来，绘制五个半径依次增大的圆，并将它们的圆心放到同一条y轴上，代码如下

<span style="font-size:14px;"> var dataset = [ 5, 10, 15, 20, 25 ];
 var circles = svg.selectAll("circle")
    .data(dataset)        
    .enter()
    .append("circle");  
  circles.attr("cx", function(d, i) {//圆心坐标从左向右依次递增，注意：i表示引入数据在数组的下标，如：d=5,i=0
        return (i * 50) + 25;
    })
    .attr("cy", h/2) //将圆心放到svg高度中间
    .attr("r", function(d) {//半径
        return d;
    })</span>

紧接着设置各圆的属性

<span style="font-size:14px;">    .attr("fill", "yellow")         //给各圆填充黄色
    .attr("stroke", "orange")       //给各圆边涂成橘黄
    .attr("stroke-width", function(d) { //按比例设置边的厚度
    return d/2;
}); 
</span>

至此，SVG上的圆就绘制完成了见下图

绘制线

在svg绘制一条线，首先要定义它的两个端点，起点和终点（x1,y1）和（x2,y2）

线的基本属性包括：

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

<span style="font-size:14px;">var line = svg.append('line')
            .attr('x1',100)   
            .attr('y1',100)
            .attr('x2',200)
            .attr('y2',200)
            .attr('style','stroke:rgb(99,99,99);stroke-width:2'); //描边宽度</span>

显示效果图如下：

用力图简介

有点有线，那么有关联的点用线相连，再设置下点之间的电荷排斥力，让没关联的点保持距离，那么力图的雏形就形成了。

力学图（ Force ），也有被翻译做力导向图等。这种图很有意思，先从初始数据开始，看下面代码：

{
  "nodes":[
    {"name":"Myriel","group":3,"QQ":"635511111"},
    {"name":"Napoleon","group":1,"QQ":"635511112"},
    {"name":"Mlle.Baptistine","group":1,"QQ":"635511113"},
    {"name":"Mme.Magloire","group":1,"QQ":"635511114"},
    {"name":"CountessdeLo","group":1,"QQ":"635511115"},
    {"name":"Geborand","group":1,"QQ":"635511116"},
    {"name":"Champtercier","group":1,"QQ":"635511117"},
    {"name":"Cravatte","group":1,"QQ":"635512111"},
    {"name":"Count","group":1,"QQ":"635513111"},
    {"name":"OldMan","group":1,"QQ":"635514111"},
    {"name":"Labarre","group":2,"QQ":"635515111"},
    {"name":"Valjean","group":2,"QQ":"635516111"},
    {"name":"Marguerite","group":3,"QQ":"635531111"},
    {"name":"Mme.deR","group":2,"QQ":"635511311"},
    {"name":"Isabeau","group":2,"QQ":"635511211"},
    {"name":"Gervais","group":2,"QQ":"635514111"},
    {"name":"Tholomyes","group":3,"QQ":"635571111"},
    {"name":"Listolier","group":3,"QQ":"635581111"},
    {"name":"Fameuil","group":3,"QQ":"635511011"},
    {"name":"Blacheville","group":3,"QQ":"635211111"},
    {"name":"Favourite","group":3,"QQ":"635510111"},
    {"name":"Dahlia","group":3,"QQ":"635511121"}
  ],
  "links":[
    {"source":1,"target":0,"value":1},
    {"source":2,"target":0,"value":8},
    {"source":3,"target":0,"value":10},
    {"source":3,"target":2,"value":6},
    {"source":4,"target":0,"value":1},
    {"source":5,"target":0,"value":1},
    {"source":6,"target":0,"value":1},
    {"source":7,"target":0,"value":1},
    {"source":8,"target":0,"value":2},
    {"source":9,"target":0,"value":1},
    {"source":11,"target":1,"value":1},
    {"source":11,"target":3,"value":3},
    {"source":11,"target":2,"value":3},
    {"source":11,"target":0,"value":5},
    {"source":12,"target":2,"value":1},
    {"source":13,"target":2,"value":1},
    {"source":14,"target":2,"value":1},
    {"source":15,"target":2,"value":1},
    {"source":17,"target":3,"value":4},
    {"source":18,"target":3,"value":4},
    {"source":18,"target":3,"value":4},
    {"source":19,"target":3,"value":4},
    {"source":19,"target":2,"value":4},
    {"source":19,"target":3,"value":4},
    {"source":20,"target":4,"value":3},
    {"source":20,"target":1,"value":3},
    {"source":20,"target":2,"value":3},
    {"source":20,"target":3,"value":4},
    {"source":21,"target":16,"value":3},
    {"source":21,"target":17,"value":3},
    {"source":21,"target":18,"value":3},
    {"source":21,"target":19,"value":3},
    {"source":21,"target":20,"value":5}
  ]
}

这些数据包含两部分，点（nodes）和边（links），source 和target的数值代表nodes数组该数值下标对应的元素。

注意的一点，不管nodes元素有多少属性，source和target都暂时指向人名，如source 1 target0 表示napoleon和myriel连接

细细一看就会发现，这些点只是些人员的属性而已，光靠这些是无法知道每个点该画到哪儿。

所以就需要先了解一下D3 画力图的一些专有方法了。下面为大家罗列一些必要的方法和解释：

为了使用方便先将上面的json数据，赋值给 dataset，放到js里

（以后这些数据都会保存在相应格式的文件中，由d3加载，加载方法在 D3总体展示篇已略有介绍）

var force = d3.layout.force()  //转换数据的方法，将点转换为坐标格式
.nodes(<span style="font-size:14px;">dataset.</span>nodes)          //传入点
.links(dataset.links)          //传入边
.size([w, h])                  //设置图形宽高
.start();                      //开始转换

以上代码是用力图最基础的布局方法。

这些基本布局并不能满足所有数据集，我们还要在这基础上添加一些layout的自定义方法，

比如设置节点间连线的长度、节点间互斥力大小。完善之后的代码显示如下：

var force = d3.layout.force()
.nodes(dataset.nodes)
.links(dataset.edges)
.size([w, h])
.linkDistance([50]) // 节点连线长度
.charge([-100]) //    排斥力
.start();

至此，力图基本初始化布局完成

接下来创建连线

var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 1);

这里的连线颜色和宽度都可以编写函数随意设定，例如同类人员设为同色，重要人员连线加粗等

然后为每个节点创建圆，方便浏览

var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i) {
return colors(i);
})
.call(force.drag);    //增加拖动效果，拉动节点

最后，我们就要打点，将点线绘制到画布上

force.on("tick", function() {
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; });

nodes.attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; });
});

这样，每次打点，取得线和点的坐标，在更新到画布上。那么这些坐标哪儿来的？就是layout初始化转换传入的点线数据后，

为他们模拟一些坐标信息。你可以在浏览器控制台输入dataset查看各点线坐标信息