D3.js制作二维坐标轴基本入门
D3.js制作二维坐标轴基本入门
Html结构
<body>
<div id="container">
div>
body>CSS样式
#container{
background:#ddd;
width:500px;
height:250px;
}
path{
fill:none;
stroke:#4682B4;
stroke-width:2;
}
.domain,.tick{
stroke:gray; /*可以通过审查元素查看相关的g标签，每个g标签都加了这两个类，分别对应每个单位坐标，所以定义这两个类的样式就可以设置坐标可视*/
stroke-width:1;
}javascript脚本
var width=500;
var height=300; //定义尺寸
var g_margin={top:30,right:100,bottom:80,left:100};
var g_width=width-g_margin.right-g_margin.left;
var g_height=height-g_margin.top-g_margin.bottom;
//确定绘制曲线位置
var data=[100,50,30,10,50,60,70,50,100]; //定义坐标数据
var svg=d3.select('#container').append('svg').attr({width:width,height:height});
var g=d3.select('svg').append('g').attr('transform','translate('+g_margin.left+','+g_margin.top+')'); //相对于svg块偏移
var scale_x=d3.scale.linear().domain([0,data.length-1]).range([0,g_width]);
var scale_y=d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0]);
//定义图像相对于g比例缩放
var line_generator=d3.svg.line().x(function(d,i){return scale_x(i);}).y(function(d){return scale_y(d);})
.interpolate('cardinal'); //拟合方式，使得折线光滑
var path=d3.select('g').append('path').attr('d',line_generator(data));
var x_axis=d3.svg.axis().scale(scale_x);//绘制x轴
var y_axis=d3.svg.axis().scale(scale_y).orient('left');//绘制y轴
g.append('g').call(x_axis).attr('transform','translate('+0+','+g_height+')');
g.append('g').call(y_axis)
.append('text') //绘制文本
.text('Price($)')
.attr({ 'transform':'rotate(-90)','text-anchor': 'end', 'dy': '-2em' ,'dx':'1em','font-size':'16px','font-style':'微软雅黑','font-weight':'700'});
最终的结果:
width="100%" height="300" src="//jsfiddle.net/simonchen/8gaxtgdb/embedded/" allowfullscreen="allowfullscreen">分析
d3的使用类似于jquery，支持链式操作。本例通过一个svg容器来承载整个图像。
首先生成一个svg元素，可以使用select方法，来获取父元素容器，这里是container，类似于getElementById，不过它的参数还可以是选择器，不一定是节点。另外还有一个比较相似的方法selectAll，它选择的是全部符合条件的对象。
attr方法用来给对象设置属性，里面的参数形式可以是json格式的，当然你也可以针对某个对象后面接上多个attr方法。
svg下对应有多个g容器(每个数值值对应一个，图像也是一个g容器)
line_generator函数用于生成数据，line()方法需要x和y方向的数据。
传入数据和数据下标给x函数，并return下标；传入数据给y函数并return。
注意这里return的要是比例值
应该生成的html结构：
<svg>
<g transform="translate(...)">
<path d="M0,0Q30,81.7,37.5,95C48.75,114.95,63.75,121.6,75,133S101.25,176.7,112.5,171S138.75,109.25,150,95S176.25,81.7,187.5,76S213.75,54.15,225,57S251.25,103.55,262.5,95Q270,89.3,300,0">path>
svg>
定义缩放scale_x和scale_y：线性缩放scale.linear()
domain：输入范围，
-对于scale_x：实际数据数量
-对于scale_y：实际数据的最大值
range：输出范围
-对于scale_x：g容器宽度
-对于scale_y：g容器高度
慕课网课程《使用D3绘制图表》笔记