D3條形圖和使用多個比例

我使用d3創建「趨勢」分析條形圖。該圖表中間有一個X軸，並且可以在該軸上方或下方延伸以表示百分比變化。我已經通過使用3個刻度 - X軸的序數和Y軸的兩個線性刻度來做到這一點。線性標尺的使用兩個是我不確定的。它看起來不雅，而且「不正確」。D3條形圖和使用多個比例

有問題的尺度：

this.pyscale.domain([0, 1]); 
this.pyscale.rangeRound([this.height/2, 0]); 

this.nyscale.domain([-1, 0]); 
this.nyscale.rangeRound([this.height, this.height/2]);

功能有關拉開門閂：

bar.append("rect") 
    .attr("y", function(d) { 
     if (d[that.ycol] >= 0) { 
      return that.pyscale(d[that.ycol]); 
     } 
     return that.height/2; 
    }) 
    .attr("height", function(d) { 
     if (d[that.ycol] >= 0) { 
      return that.height/2 - that.pyscale(d[that.ycol]); 
     } 
     return that.nyscale(d[that.ycol]) - that.height/2; 
    }) 
    .attr("width", this.xscale.rangeBand())

這是一個體面的方式來做到這一點？還是有更優雅的方式使用我缺少的Y尺度？

謝謝你的時間。

來源

2014-02-05 zchtodd

-1

從你的描述，這聽起來像你應該能夠有一個尺度來代替你的兩個尺度只是這樣的：

this.yscale.domain([-1, 1]); 
this.yscale.rangeRound([this.height, 0]);

在代碼的其餘部分

，並使用this.yscale。

來源

2014-02-05 15:38:03

澄清：您仍然需要根據值（正數）或零線（負數）決定是否定位矩形的頂部：'yscale（Math.max（0，d [that .ycol]））'應該可以工作。對於矩形的高度，可以使用'Math.abs（yscale（d [that.ycol]） - yscale（0））'。 – AmeliaBR

好，我錯過了！ –

如果我們只能使用負高度或寬度來表示「與正常方向相反的方向畫」，但沒有這樣的運氣，那麼代碼將變得如此簡單。 – AmeliaBR

D3條形圖和使用多個比例

回答

相關問題