2492人阅读
d3.js（23）
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&&/title&
&style type=&text/css&&
font-size: 10
&script src=&js/d3.min.js& type=&text/javascript& charset=&utf-8&&&/script&
&script src=&js/jquery-1.11.3.min.js& type=&text/javascript& charset=&utf-8&&&/script&
&svg&&/svg&
&script type=&text/javascript&&
var width=500;
var height= 500;
var svg = d3.select(&svg&);
svg.attr(&x&,300)
.attr(&y&,300)
.attr(&width&,1000)
.attr(&height&,1000);
var nodes = [ { name: &桂林& }, { name: &广州& },
{ name: &厦门& }, { name: &杭州& },
{ name: &上海& }, { name: &青岛& },
{ name: &天津& } ];
var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
//试了下，source和target不能换名字的
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 6 } ];
/*初始化force*/
var force = d3.layout.force()
.nodes(nodes)
.links(edges)
.size([300,300])
//作用力的中心区域
.linkDistance(100)
//连线的长度
.charge([-100]);
//负数为排斥 正数为吸引
/*很关键 启动force*/
force.start();
/*添加连线*/
var svg_edges = svg.selectAll(&line&)
.data(edges)
.append(&line&)
.attr(&dx&,function(d,i){
return i*20;
.attr(&dy&,function(d,i){
return i*30;
.style(&stroke&,&#ccc&)
//线条的颜色
.style(&stroke-width&,1);//线条的宽度
var color = d3.scale.category20();
/*添加节点*/
var svg_nodes = svg.selectAll(&circle&)
.data(nodes)
.append(&circle&)
.attr(&cx&,function(d,i){
return i*20;
.attr(&cy&,function(d,i){
return i*30;
.attr(&r&,20)
.style(&fill&,function(d,i){
return color(i);
.call(force.drag);
//调用drag函数使节点能被拖动
/*添加描述节点的文字*/
var svg_texts = svg.selectAll(&text&)
.data(nodes)
.append(&text&)
.attr(&class&,&good&)
.style(&fill&,&black&)
.attr(&dx&,-10)
//文字相对node中心的移动
.attr(&dy&,10)
.text(function(d,i){
//返回节点的名字
.style(&fill&,&white&);
force.on(&tick&, function(){ //对于每一个时间间隔
将之前通过force活着
//更新连线坐标
svg_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; });
//更新节点坐标
svg_nodes.attr(&cx&,function(d){ return d.x; })
.attr(&cy&,function(d){ return d.y; });
//更新文字坐标
svg_texts.attr(&x&, function(d){ return d.x; })
.attr(&y&, function(d){ return d.y; });
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：74279次
积分：1732
积分：1732
排名：千里之外
原创：86篇
译文：11篇
评论：19条
阅读：3171
文章：23篇
阅读：27412
(2)(3)(1)(2)(3)(10)(7)(6)(3)(7)(3)(11)(9)(15)(14)Learning&D3.js(7)&面积(area)图与缩放查看(1)
这一次我们要做一个实用性比较强的图表：带缩略图拖拽查看的面积图。
面积图强调数量随时间而变化的程度，是非常常用的可视化图表
&/demo/brush.html
本次的demo
&/demo/brush2.html
首先我们观察下效果图
上面的效果图是由两个面积图组成的。我们首先要绘制出这两个静态的图表，然后根据d3js提供的强大工具来制作缩略拖拽查看的效果.
首先定义好图表尺寸
var margin = {top: 10, right: 10, bottom: 100, left: 40},
//上图位置
&&&&margin2
= {top: 430, right: 10, bottom: 20, left:
40},//下图位置
= 960 - margin.left - margin.right,//总宽
&&&&height
= 500 - margin.top - margin.bottom,//总高
&&&&height2
= 500 - margin2.top - margin2.//下图宽度
之后我们建立一个工具函数，来格式化时间
var parseDate = d3.time.format("%b %Y").
d3.time.format方法是非常有用的一个函数。可以通过设置一定的传入格式来格式化时间。注意，若要返回转换后的时间对象,需要使用parse函数。
此处%b表示月份的缩写,%Y表示一个带有世纪的年份 (比如2012年，而不是12年)
这一类的参数详解可以参考api&/mbostock/d3/wiki/Time-Formatting
比如我的原始数据源是Jan 2000
d3.time.format("%b %Y").parse('Jan 2000')
来得到时间对象.那么这个时间对象是啥呢，他是javascript标准的时间对象。通过这个对象，可以非常方便的取得各种想要的时间单位。
d3.time.format("%b %Y").parse('Jan
2000').getFullYear()//返回2000
具体可以参考
&/jsref_obj_date.html
之后因为出现了坐标轴，我们需要绘制坐标轴。绘制坐标轴需要使用axis系列api。大家可以复习下第三篇
/p/12474.html&
注意绘制坐标轴的步骤一定要掌握
1.规定数据范围
&利用x.scale.linear之类api配合range
2.构造坐标轴
var xAxis = d3.svg.axis()
&&&&&&&&&&&&.scale(数据范围)
&&&&&&&&&&&&.orient(排列方式)
3.把坐标轴插入到图表中
图表.append("g")
&&&&&&.attr("class",
"坐标轴class")
&&&&&&.call(坐标轴);
遵循以上的步骤，就可以轻松绘制坐标轴了。
var x = d3.time.scale().range([0, width]), //建立数据容器
把数值转为时间标度再转为宽度
= d3.time.scale().range([0, width]),
= d3.scale.linear().range([height, 0]),//直线标度 Learning
D3.js(1)学习制作一个柱形图/直方图
= d3.scale.linear().range([height2, 0]);
var xAxis =
d3.svg.axis().scale(x).orient("bottom"),//制作上图的X轴
&&&&xAxis2
d3.svg.axis().scale(x2).orient("bottom"),//制作下图的X轴
= d3.svg.axis().scale(y).orient("left");//制作上图的Y轴
之后我们要开始绘制area(面积)了。上期教程大家应该已经明白chord的形状绘制也是通过path进行的。d3的area方法，同样返回的是path。大家可以复习下上期教程
&/p/12629.html
&area的api可以参考&/mbostock/d3/wiki/SVG-Shapes#wiki-area
官方推荐的一个一般写法
var x = d3.scale.linear().range([0, w]),
= d3.scale.linear().range([h, 0]);
var area = d3.svg.area()
&&&&.x(function(d)
{ return x(d.x); })
&&&&.y0(h)
&&&&.y1(function(d)
{ return y(d.y); });
&x表示数据在横坐标的位置，y0可以认为是总高度,y1表示数据在纵坐标的高度
现在我们来生成这个area的path
var area = d3.svg.area()//生成上图area
注意这个area是一个path，要利用attr(d)加载进去
&&&&.x(function(d)
{ return x(d.date); })
&&&&.y0(height)
///mbostock/d3/wiki/SVG-Shapes#wiki-area
&&&&.y1(function(d)
{ return y(d.price); });
var area2 = d3.svg.area()//生成下图area
&&&&.x(function(d)
{ return x2(d.date); })
&&&&.y0(height2)
&&&&.y1(function(d)
{ return y2(d.price); });
之后给这两个area图造空间，扔进去。
var svg = d3.select("body").append("svg")//主容器
&&&&.attr("width",
width margin.left margin.right)
&&&&.attr("height",
height margin.top margin.bottom);
var focus = svg.append("g")//制作上图容器
&&&&.attr("transform",
"translate(" margin.left "," margin.top ")");
var context = svg.append("g")//制作下图容器
&&&&.attr("transform",
"translate(" margin2.left "," margin2.top ")");
&注意属性设置的跟开始设置好的边距一致。
现在图表的结构基本制作好了。我们需要引入数据。数据文件：/demo/data.csv
D3js提供了非常多的方法来加载外部数据，这里我们使用d3.csv方法来加载数据
api可以参考&/mbostock/d3/wiki/CSV
这个方法会发起一个HTTP
GET请求，去请求指定的url下以逗号分隔的(CSV)文件。这个文件的内容被认为是符合RFC4180-compliant规范的。请求是异步处理的。当CSV数据有效后,会调用回调函数，传入数据作为参数。如果一个错误发生时,回调函数也会被调用,这时候可以在回调函数里捕获error。传入后的数据会调用d3.csv.parse函数。例如:
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
&&{"Year": "1997", "Make":
"Ford", "Model": "E350", "Length": "2.34"},
&&{"Year": "2000", "Make":
"Mercury", "Model": "Cougar", "Length": "2.38"}
变为数组。因此我们可以利用foreach等方法来遍历之，也可以循环遍历
d3.csv("data.csv", function(error, data)
{//利用csv方法读取数据
&&data.forEach(function(d)
{//遍历数据
&&&&d.date
= parseDate(d.date);//读取date并转换为时间对象
&&&&d.price
&&x.domain(d3.extent(data.map(function(d)
{ return d. })));//利用domain方法给数据容器匹配上数据
&&y.domain([0,
d3.max(data.map(function(d) { return d.
&&x2.domain(x.domain());
&&y2.domain(y.domain());
//添加上面图的图表
&&focus.append("path")
&&&&&&.datum(data)
&&&&&&.attr("d",
//添加上面图的XY坐标轴
&&focus.append("g")
&&&&&&.attr("class",
&&&&&&.attr("transform",
"translate(0," height ")")
&&&&&&.call(xAxis);
&&focus.append("g")
&&&&&&.attr("class",
&&&&&&.call(yAxis);
//添加下面图的图表
&&context.append("path")
&&&&&&.datum(data)
&&&&&&.attr("d",
//添加下面图的X坐标轴
&&context.append("g")
&&&&&&.attr("class",
&&&&&&.attr("transform",
"translate(0," height2 ")")
&&&&&&.call(xAxis2);
&之后我们利用call方法绑定两个坐标轴，再把两个绘制好的area利用attr的d属性添加进去，就大功告成了。
本次的demo
&/demo/brush2.html
作者：新浪微博&
Learning D3.js 系列
原文链接：/p/13322.html
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。【D3.V3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示
【D3.V3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示
编辑：www.fx114.net
本篇文章主要介绍了"【D3.V3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示"，主要涉及到【D3.V3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示方面的内容，对于【D3.V3.js数据可视化系列教程】（三十三）-- 力导向图之图片和提示感兴趣的同学可以参考一下。
在力导向图之带文字的基础上添加图片和提示
img&tip.png
//设置图片
node.append(&svg:image&)
.attr(&class&, &circle&)
.attr(&xlink:href&, &http://localhost:8080/spring/imgs/myself.PNG&)
.attr(&x&, &-8px&)
.attr(&y&, &-8px&)
.attr(&width&, &16px&)
.attr(&height&, &16px&);
//设置提示
node.append(&svg:title&)
.text(function(d) { return d. });
本站评论功能暂时取消，后续此功能例行通知。
本文标题：
本页链接：下次自动登录
现在的位置:
& 综合 & 正文
【D3.V3.js数据可视化系列教程】（三十）–力导向图之带文字
//(1)链接数组
var links = [
{source: "Microsoft", target: "Amazon", type: "licensing"
,weight:1,color:1},
{source: "Microsoft", target: "HTC", type: "licensing"
,weight:3,color:4},
{source: "Samsung", target: "Apple", type: "suit"
,weight:4,color:6},
{source: "Motorola", target: "Apple", type: "suit"
,weight:6,color:65},
{source: "Nokia", target: "Apple", type: "resolved"
,weight:3,color:76},
{source: "HTC", target: "Apple", type: "suit"
,weight:8,color:879},
{source: "Kodak", target: "Apple", type: "suit"
,weight:7,color:989},
{source: "Microsoft", target: "Barnes & Noble", type: "suit" ,weight:9,color:643},
{source: "Microsoft", target: "Foxconn", type: "suit"
,weight:1,color:54},
{source: "Oracle", target: "Google", type: "suit"
,weight:3,color:54},
{source: "Apple", target: "HTC", type: "suit"
,weight:4,color:45},
{source: "Microsoft", target: "Inventec", type: "suit"
,weight:0,color:43},
{source: "Samsung", target: "Kodak", type: "resolved"
,weight:8,color:243},
{source: "LG", target: "Kodak", type: "resolved"
,weight:1,color:43},
{source: "RIM", target: "Kodak", type: "suit"
,weight:5,color:13},
{source: "Sony", target: "LG", type: "suit"
,weight:3,color:351},
{source: "Kodak", target: "LG", type: "resolved"
,weight:4,color:1},
{source: "Apple", target: "Nokia", type: "resolved"
,weight:1,color:1},
{source: "Qualcomm", target: "Nokia", type: "resolved"
,weight:3,color:4},
{source: "Apple", target: "Motorola", type: "suit"
,weight:4,color:6},
{source: "Microsoft", target: "Motorola", type: "suit"
,weight:6,color:65},
{source: "Motorola", target: "Microsoft", type: "suit"
,weight:3,color:76},
{source: "Huawei", target: "ZTE", type: "suit"
,weight:8,color:879},
{source: "Ericsson", target: "ZTE", type: "suit"
,weight:7,color:989},
{source: "Kodak", target: "Samsung", type: "resolved"
,weight:9,color:643},
{source: "Apple", target: "Samsung", type: "suit"
,weight:1,color:54},
{source: "Kodak", target: "RIM", type: "suit"
,weight:3,color:54},
{source: "Nokia", target: "Qualcomm", type: "suit"
,weight:4,color:45}
var nodes = {};
//(2)从链接中分离出不同的节点
//一个小问题：节点的weight属性怎么产生的？
links.forEach(function(link) {
//思路就是：在连接中遍历链接，节点数组有了这个链接的源节点就把链接指向这个节点。没有的话把链接上的节点加到链接数组指定名称name属性，并把链接指向这个节点
console.log(nodes);
link.source = nodes[link.source] //link.sourc就是节点值比如Apple
|| (nodes[link.source] = {name: link.source});//(填加节点数据)
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
//(3)为链接添加线
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var colors=d3.scale.category20();
link.style("stroke",function(d){//
设置线的颜色
return colors(d.color);
.style("stroke-width",function(d,i){//设置线的宽度
//(4)为链接添加节点
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
radius (d){
if(!d.weight){//节点weight属性没有值初始化为1（一般就是叶子了）
d.weight=1;
return Math.log(d.weight)*10;
node.append("circle")
.attr("r",function(d){
//设置圆点半径
return radius (d);
.style("fill",function(d){ //设置圆点的颜色
return colors(d.weight*d.weight*d.weight);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d. });
function tick() {//打点更新坐标
.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; });
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//设置圆点半径
return radius (d)+10;
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//恢复圆点半径
return radius (d);
&!DOCTYPE html&
&meta charset="utf-8"&
&title&testD3-27-textforce.html&/title&
&script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"&&/script&
&style type="text/css"&
&script type="text/javascript"&
//(1)链接数组
var links = [
{source: "Microsoft", target: "Amazon", type: "licensing"
,weight:1,color:1},
{source: "Microsoft", target: "HTC", type: "licensing"
,weight:3,color:4},
{source: "Samsung", target: "Apple", type: "suit"
,weight:4,color:6},
{source: "Motorola", target: "Apple", type: "suit"
,weight:6,color:65},
{source: "Nokia", target: "Apple", type: "resolved"
,weight:3,color:76},
{source: "HTC", target: "Apple", type: "suit"
,weight:8,color:879},
{source: "Kodak", target: "Apple", type: "suit"
,weight:7,color:989},
{source: "Microsoft", target: "Barnes & Noble", type: "suit" ,weight:9,color:643},
{source: "Microsoft", target: "Foxconn", type: "suit"
,weight:1,color:54},
{source: "Oracle", target: "Google", type: "suit"
,weight:3,color:54},
{source: "Apple", target: "HTC", type: "suit"
,weight:4,color:45},
{source: "Microsoft", target: "Inventec", type: "suit"
,weight:0,color:43},
{source: "Samsung", target: "Kodak", type: "resolved"
,weight:8,color:243},
{source: "LG", target: "Kodak", type: "resolved"
,weight:1,color:43},
{source: "RIM", target: "Kodak", type: "suit"
,weight:5,color:13},
{source: "Sony", target: "LG", type: "suit"
,weight:3,color:351},
{source: "Kodak", target: "LG", type: "resolved"
,weight:4,color:1},
{source: "Apple", target: "Nokia", type: "resolved"
,weight:1,color:1},
{source: "Qualcomm", target: "Nokia", type: "resolved"
,weight:3,color:4},
{source: "Apple", target: "Motorola", type: "suit"
,weight:4,color:6},
{source: "Microsoft", target: "Motorola", type: "suit"
,weight:6,color:65},
{source: "Motorola", target: "Microsoft", type: "suit"
,weight:3,color:76},
{source: "Huawei", target: "ZTE", type: "suit"
,weight:8,color:879},
{source: "Ericsson", target: "ZTE", type: "suit"
,weight:7,color:989},
{source: "Kodak", target: "Samsung", type: "resolved"
,weight:9,color:643},
{source: "Apple", target: "Samsung", type: "suit"
,weight:1,color:54},
{source: "Kodak", target: "RIM", type: "suit"
,weight:3,color:54},
{source: "Nokia", target: "Qualcomm", type: "suit"
,weight:4,color:45}
var nodes = {};
//(2)从链接中分离出不同的节点
//一个小问题：节点的weight属性怎么产生的？
links.forEach(function(link) {
//思路就是：在连接中遍历链接，节点数组有了这个链接的源节点就把链接指向这个节点。没有的话把链接上的节点加到链接数组指定名称name属性，并把链接指向这个节点
console.log(nodes);
link.source = nodes[link.source] //link.sourc就是节点值比如Apple
|| (nodes[link.source] = {name: link.source});//(填加节点数据)
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//(3)为链接添加线
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var colors=d3.scale.category20();
link.style("stroke",function(d){//
设置线的颜色
return colors(d.color);
.style("stroke-width",function(d,i){//设置线的宽度
//(4)为链接添加节点
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
radius (d){
if(!d.weight){//节点weight属性没有值初始化为1（一般就是叶子了）
d.weight=1;
return Math.log(d.weight)*10;
node.append("circle")
.attr("r",function(d){
//设置圆点半径
return radius (d);
.style("fill",function(d){ //设置圆点的颜色
return colors(d.weight*d.weight*d.weight);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d. });
function tick() {//打点更新坐标
.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; });
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//设置圆点半径
return radius (d)+10;
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//恢复圆点半径
return radius (d);
&&&&推荐文章:
【上篇】【下篇】