d3.js - 具有负值 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");