前面已经说过D3
的功能十分强大,但是往往实际使用时只需要用到一部分内容,在这里,就只用到了 比例尺 和 布局 两部分,外加 核心 的请求部分(请求数据),分别用来绘制Graph
的显示坐标轴和图的顶点及边;
绘制坐标轴
传统坐标轴
这里指的是 第一象限 的坐标轴,即两轴的坐标均为正数,坐标原点为(0,0)
具体可以看 这里,说的比较详细。
十字坐标轴
这里指的是 全象限 坐标轴,即两轴的坐标均从-∞
开始,坐标原点为(0,0)
本质上,仍然是一般坐标轴的变形,主要原理有两点:
- 一是利用 比例尺 对源数据做符合中心坐标轴的变换;
- 二是创建坐标轴时利用
attr("transform","translate(0,"+0.5*svgHight+")")
来对坐标轴进行平移,从而达到原点在画布中心的十字坐标轴的效果。
创建比例尺
1 2 3 4 5 6
| var xScale = d3.scale.linear() .domain([-50,50]).range([0,1000]); var yScale = d3.scale.linear() .domain([-50,50]).range([1000,0]);
|
添加坐标轴
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| var formatPrecision = d3.format(''); var xAxis = d3.svg.axis() .scale(xScale) .ticks(11) .orient('bottom') .tickFormat(formatPrecision); var yAxis = d3.svg.axis() .scale(yScale) .orient('left') .ticks(11) .tickFormat(formatPrecision); svg.append('g') .attr('class', 'axis') .attr("transform","translate(0,"+0.5*svgHight+")") .call(xAxis); svg.append('g') .attr('class', 'axis') .attr("transform","translate("+0.5*svgWidth+",0)") .call(yAxis);
|
绘制图(circle+line)
关于图的绘制,本质上就是圆点和线的绘制,所以这也解释了为什么输入文件中的边数据也需要包含坐标的原因,因为在d3
中绘制顶点和绘制边是互不相关的。
另外需要注意的是,这里不要直接返回源数据坐标,要带入到上述定义的 比例尺 中。
话不多说直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| var svg = d3.select('#div'+index) .append('svg') .attr('width', svgWidth) .attr('height', svgHight); svg.append('text') .attr('x', svgWidth / 2 - 120) .attr('y', 30) .attr('class', 'title') .text('这是一个用d3画的简略坐标轴'); svg.selectAll('circle') .data(data.nodes) .enter() .append('circle') .attr('cx', function(d) { return xScale(d.cx); }) .attr('cy', function(d) { return yScale(d.cy); }) .attr("fill","#6495ed") .attr("origin", function(d) { return d.cx+","+d.cy; }) .attr('r', function(d) { if(d.value === 0||d.value/2===0)return 2; else return d.value/2; }); svg.selectAll('line') .data(data.links) .enter() .append('line') .attr('x1',function(d){ return xScale(d.x1); }) .attr('y1',function(d){ return yScale(d.y1); }) .attr('x2',function(d){ return xScale(d.x2); }) .attr('y2',function(d){ return yScale(d.y2); }) .attr("stroke","gray") .attr('stroke-width', function() { return 0.2; });
|
数据读入
在数据读取方面,d3.js
本身提供了一套请求操作,属于 核心 部分。具体的操作如下:
可以直接使用上述的API进行文件读取,非常方便
1 2 3 4
| d3.csv("data.csv",function(error,data){ if(error){...} esle{...} });
|
当然可以完美的结合JQuery
进行数据操作:
1 2 3
| $.getJSON("data.json, "", function(data) { // 前面各部分内容,对data进行解析即可 }
|
最终效果
数据格式,见文章 D3+Node快速实现图数据的可视化
「 相关文章 」
计算机仿真 2014-3 北京工商大学 在数据结构优化管理的研究中,传统的力导向方法应用于层次结构数据的展示时,会存在树形布局展示不清楚的问题。为解决上述问题,通过层次数据特征分析,提出了...
写在前面原项目是一个Web项目,采用传统的Servlet方式,后台主要完成的工作是计算节点的坐标,将节点的坐标封装成json格式由与前台进行交互。前期阶段,从前后台的数据传输方面尝试对代码进行理...
原文名:Cluster Stability and the Use of Noise in Interpretation of Clustering 中文译:聚类的稳定性和在聚类解释中添加噪声 ...