具有负值的分组条形图d3

Question

第一次问这里

我想修改这里的代码https://gist.github.com/mbostock/3887051，以便它将显示负值。

我只设法通过改变这条线使y轴显示正确的负值

y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

:

y.domain([ d3.min(data, function(d) { return d3.min(d.ages, function(d) { return d.value; }); }), d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

但是这只涉及到y轴，x轴上没有任何变化

我在网上到处都找过了，但只有负的堆叠条形图，没有负的分组条形图。

请帮忙。提前非常感谢!

Answer 1

你给我们的样本数据不包含负值，这里是一个摆弄一些随机数据与负值http://jsfiddle.net/srG6A/请注意这部分:

// if 0 is not between min & max I put x-axis on the bottom
var xAxisTransform =  height; 
    if(d3Min < 0 && 0 < d3Max) {
        xAxisTransform = height * (d3Max / (d3Max -d3Min));
    }
  svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(0," + xAxisTransform + ")") // this line moves x-axis
            .call(xAxis);

Answer 2

我不明白state的负值是什么意思，移动y轴来创造负值的假象怎么样

svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate("+width/2+",0)")   // added line
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Population");