D3.js 比例尺

D3中比例尺是一组把输入域映射为输出范围的函数，通过这个函数，我们可以调用这些比例尺函数，传入值就可以返回按比例生成的输出值。

创建比例尺：

D3有一个比例尺生成器，通过d3.scale来访问，要生成一个比例尺，在scale后面加上需要创建的比例尺类型即可：

以以下代码为例，我们创建一个比例尺类型的函数。定义其定义域为：100-500，值域为10-350，传值方式为数组。

var scale = d3.scale = scale.linear()
    .scale.domain([100,500])  
    .scale.range([10,350]);    

在实际使用过程中，由于定义域我们并不知道具体数值，因此可以通过动态分析的方式去获取定义域的最大最小值

min()函数与max()函数原理相同，都接收一到两个参数，第一个参数必须是对数据集（数组）的引用。

max() 可以简单地从数组的第一个元素开始比较，然后找出其中最大的那个。

当传入的是一个数组的数组的时候，就要指定一个参数来指定需要比较的是第几个元素，如d[0]。

d3.max(dataset,function(d)){
    return d[0];});

设置动态缩放：

通过比例尺动态缩放，以x轴的缩放为例，可以创建一个比例尺函数,值域最大值是SVG元素的边界值w。为了避免有些元素过大超过边界，在考虑值域的时候也要考虑边界限定。

var xScale = d3.scale.linear()
    .domain([0,d3.max(dataset,function(d){ return d[0];)])
    .range([padding,w-padding]);
.attr('cx",function(d){ return xScale(d[0]);})

var yScale = d3.scale.linear()
    .domain([0,d3.max(dataset,function(d){ return d[1];)])
    .range([h-padding,padding]);
.attr('cx",function(d){ return xScale(d[1]);});

这样做虽然看起来没有什么变化，但是当我们修改SVG元素的时候，图像也可以跟着动态变化了。

 

转载于:https://www.cnblogs.com/guangluwutu/p/10002013.html