结果展示图:
1.首先要引入D3js的js配置文件
<span style="font-size:14px;"><span style="white-space:pre"> </span><script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script></span>
2.定义一些变量
var width =600;
var height=600;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
[600, 150]
];
var padding=30;
width 和height 接下来用于定义SVG(可扩展矢量图形)的大小,以及图形位置的处理。dataset是一个点(point)的数组。padding用于处理x轴 和 y轴离边的间距。
3.定义x轴,y轴的尺度
//得到X轴和Y轴的尺度函数
var xScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d)
{
return d[0];
})
])
.range([padding,width-padding*2]);
var yScale = d3.scale.linear()
.domain([0,d3.max(dataset,function(d)
{
return d[1];
})
])
.range([height-padding,padding]);<
d3.scale.linear ()指定要使用线性函数的scale。
d3.max(dataset,function(d)
{ return d[0];
}