d3条形图是颠倒的 [英] d3 bar chart is upside down

问题描述

我在d3中绘制了一个简单的条形图，显示为垂直条形： http://jsfiddle.net/philgyford/LjxaV/ 2 /

I have a simple bar chart drawn in d3, with vertical bars: http://jsfiddle.net/philgyford/LjxaV/2/

但是，它正在绘制条形图，基线位于图表顶部。

However, it's drawing the bars down, with the baseline at the top of the chart.

我已经读过反转这一点，从底部开始，我应该改变y轴上的 range（）。所以，改变这个：

I've read that to invert this, drawing up from the bottom, I should change the range() on the y-axis. So, change this:

    .range([0, chart.style('height')]);

：

    .range([chart.style('height'), 0]);

但是，看起来像是绘制图表的逆每个酒吧，并留下酒吧本身（从底部绘制）透明。

However, that looks like it's drawing the inverse of the chart - drawing in the space above each of the bars, and leaving the bars themselves (drawn from the bottom) transparent. What am I doing wrong?

推荐答案

根据d3基本条形图：
http://bl.ocks.org/mbostock/3885304

Per the d3 basic bar chart : http://bl.ocks.org/mbostock/3885304

您在反转范围内是正确的。

You are correct in inverting the range.

此外，您的矩形应该添加如下：

Additionally, your rectangles should be added like this:

    .attr('y', function(d) { return y(d.percent); } )
    .attr('height', function(d,i){ return height - y(d.percent); });

这篇关于d3条形图是颠倒的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！