将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位置。这很混乱。