我如何在d3.js中縮放

Question

我想將一些輸入值縮放到某個輸出范圍。

輸入或域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，並且所有outs的最小值等於或大於16。

請讓我知道如何寫天平

Answer 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]);

小提琴

Answer 2

在您的代碼中，域以0開頭，范圍以16開頭

使用刻度時，這會為每個輸入產生一個偏移

當您添加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/

為了使該解決方案有效，您應該記住為每個刻度添加開始以達到您的目標

目的地