D3条形图y轴倒转

d3 bar chart transition y-axis upside down

本文关键字：条形图 D3      更新时间：2023-09-26

我是d3的新手，我正在尝试绘制动画条形图(以下示例)。我能够生成图表，但我面临的问题是运动是颠倒的(从条形的高度开始，条形朝x轴移动)。我想让运动从x轴开始向上!

这是我的代码

var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
..
..
control.selectAll("rect")
       .data(function(d) { return d.category; })
       .enter().append("rect")
       .attr("width", x1.rangeBand())
       .attr("x", function(d) { return x1(d.name); })
       .attr("height", 0)
       .attr("y", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide)
       .style("fill", function(d) { return color(d.name); });
control.selectAll("rect")
       .transition()
       .delay(function(d, i) { return i * 100; })
       .duration(1000)
       .attr("height", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
       .attr("y", function(d, i) { if(columnNum == 2 && i == 2) return height - y1(d.value); else return height - y0(d.value); });

columnNum只是表示每个组的列数。

谢谢你的帮助

将y初始化为x轴位置(即height):

control.selectAll("rect")
   .data(function(d) { return d.category; })
   .enter().append("rect")
   .attr("height", 0)
   .attr("y", height);
相关文章：