將Y軸倒過來

Question

我已經在D3中創建了一個簡單的條形圖，但條形圖是從頂部到底部而不是從底部到頂部創建的。以下是xScale，yScale和小節生成代碼：

var xscale = d3.scale.linear() 
    .domain([0, data.length]) 
    .range([0, 240]); 

var yscale = d3.scale.linear() 
    .domain([0, 100]) 
    .range([0, 240]); 

var bar = canvas.append('g') 
    .attr("id", "bar-group") 
    .attr("transform", "translate(10,20)") 
    .selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
    .attr("class", "bar") 
    .attr("height", function(d, i) { 
    return yscale(d); 
    }) 
    .attr("width", 15) 
    .attr("x", function(i) { 
    return yscale(i); 
    }) 
    .attr("y", 0) 
    .style("fill", function(i) { 
    return colors(i); 
    }); 

試圖交換yScale範圍但沒有成功。 Here is the fiddle.

Answer 1

在SVG座標系統中，原點（0,0）位於頂部左上角，而不是左下角。

除此之外，你的SVG只有150px的高度。因此，改變你的規模：

var yscale = d3.scale.linear() 
    .domain([0, 100]) 
    .range([0, 150]); 

和你的酒吧的數學：

.attr("height", function(d, i) { 
    return yscale(d); 
}) 
.attr("y", function(d){ 
    return 150 - yscale(d) 
}) 

這裏是你的更新提琴：https://jsfiddle.net/bga2q72f/

PS：不使用相同量表x和y位置。這很混亂。