在d3.js中規範x值和記錄y值

Question

我正在使用散點圖來顯示數據http://bl.ocks.org/mbostock/3887118。我在一頁上有兩個以上的圖表。我想保留兩個選項，用戶可以選擇 1.標準化按鈕：x軸上的值將被標準化並繪製新圖形。 2.記錄y按鈕：y軸上的值更改爲記錄y，並且相應地在同一頁上構建新圖形。

如何做到這一點d3.js？

另外我正在使用Nodejs，Express和d3.js來繪製它。

直到現在我已經建立了圖表。這些是增加交互性的選項。

Answer 1

我認爲最好的是定義兩個不同的尺度：

var yNormal = d3.scale.linear() ... 

和

var yLog = d3.scale.log() .... 

和按鈕點擊使用其他規模重繪圈：

//in button event handler 
if(/* log */) { 
    svg.selectAll(".dot").attr('cy', function() { return yLog(d.yourDataField); } 
} 
else { 
    svg.selectAll(".dot").attr('cy', function() { return yNorm(d.yourDataField); } 
} 

你也可以使用過渡動畫重新繪製，如下所示：

svg.selectAll(".dot").transition().duration(500).attr('cy', function() { return yLog(d.yourDataField); } 

您還可以使用this方法設置軸的縮放比例。

您也可以將其應用於X軸。