我如何在d3.js中缩放

时间:2013-12-26 06:27:07

标签: javascript d3.js

我想将一些输入值缩放到某个输出范围。

输入或域10,20,40,30 ---总和100

输出范围不应低于16 ..并且所有输入的输出之和应为214

myScale --- d3线性刻度

var myScale = d3.scale.linear().domain([0, 100]).range([16,214]);

out1=myScale(10)
out2=myScale(20)
out3=myScale(40)
out4=myScale(30)

我希望out1 + out2 + out3 + out4应始终等于214,所有出局中的最小值为16或更大。

请让我知道如何编写比例

2 个答案:

答案 0 :(得分:1)

由于minValue是16,并且正如qiu-deqing提到的那样,它的输入次数增加了很多次,我们应该确保它只被添加一次。

var minValue = 16,
    totalSum = 214,
    numberOfInputs = 4;

var maxValue = totalSum - ((numberOfInputs - 1)*minValue);

var myScale = d3.scale.linear().domain([0, 100]).range([minValue,maxValue]);

fiddle

答案 1 :(得分:0)

在您的代码中,域以0开头,范围以16开头

使用scale

时,会为每个输入生成一个偏移量

当你输出out1 out2 out3 out4时。偏移量增加4倍。所以这不是你想要的。

例如myScale(0 + 0 + 0 + 0 ) != myScale(0) + myScale(0) + myScale(0) + myScale(0)

我们可以规范化比例范围并保存偏移量

var begin = 16,
    end = 214,
    range = end - begin;

var myScale = d3.scale.linear().domain([0, 100]).range([0,range]);

out1=myScale(10)
out2=myScale(20)
out3=myScale(40)
out4=myScale(30)

// maybe it is 214.000000000000003, float is not 100% accurate
console.log(begin + out1 + out2 + out3 + out4); 

演示:http://jsfiddle.net/q7WaU/

要使此解决方案有效,您应该记住为每个比例添加开始以便

目的地

相关问题