D3條形圖形成

Question

下午好。

我在軸構造一些疑慮和標籤alignment.' 我的數據是這樣的：

var data = [[1,1.5],[2,2],[3,2.5],[4,3],[5,3.5],[6,4],[7,4.5],[8,5]];7 

我的疑惑是： 1）如何我可以在中間對齊x軸標籤酒吧; 2）反轉y軸的方向並加入x軸和y軸的極值3）插入圖表右下角的xLabel。

http://jsfiddle.net/qAHC2/645/

謝謝。

Answer 1

對於第一個，你必須計算考慮區間的寬度和條形的寬度的條的位置：

.attr("x", function(d) {return x(d[0]) + x.rangeBand()/2 - 40;}) 

對於第二個，你需要扭轉你Y的比例（SVG y座標頂部開始），調整杆據此計算方式：

var y = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d[1]; })]) 
    .range([height, 0]); 
// ... 
bars.attr("y", function(d) {return y(d[1]);}) 
    .attr("height", function(d) {return height - y(d[1]);}) 

您可以通過其中任何調整偏移連接這兩個軸。同樣，你可以把你想要它以這種方式在x標籤：

.append("text") 
.attr("x", width) 
.attr("dy", 20) 
.attr("text-anchor", "end") 
.text("Foo"); 

完整的示例here。