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

我没有看到状态的负值意味着什么，如何移动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");

带负值d3的分组条形图

2 个答案: