構建D3js面積圖負值

Question

我們爲負值柱狀圖爲例... Bar Chart with negative values

是否有區域圖任何類似的例子嗎？

Answer 1

當然，我創建了一個基於關麥克·博斯托克的帖子小提琴上reusable charts：http://jsfiddle.net/C5gYv/

基本上我做的是檢查，如果數據是正還是負，然後分別設定y 0和y：

area = d3.svg.area() 
     .x(X) 

    ... 

     g.select(".area").attr("d", 
      area.y1(function (d) { 
       // the highest point 
       if (d[1] <= 0) { 
        return yScale(0); 
       } else { 
        return Y(d); 
       } 
      }) 
       .y0(function (d) { 
       // the lowest point 
       if (d[1] <= 0) { 
        return Y(d); 
       } else { 
        return yScale(0); 
       } 
      })); 

希望有幫助！

Answer 2

這是一個古老的問題，但我認爲我或許能夠爲其他任何人登陸光明。設置您的svg區域時，只需將y0設置爲您的圖表0行位置即可。例如：

d3.svg.area() 
    .x(function(d) { 
    return x(d.x); 
    }) 
.y0(function() { 
    return y(0); 
}) 
.y1(function(d) { 
    return y(d.y); 
}); 

希望這有助於！