d3js的负值和正值

Question

我想用d3js显示负值和正值...使用dis代码，它只显示正值。

我使用过这个：http://jsfiddle.net/chrisJamesC/tNdJj/4/

任何人都可以帮助我吗？

她是代码：

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 1200 - margin.left - margin.right,
height = 390 - margin.top - margin.bottom;


var y0 = Math.max(Math.abs(d3.min(d3.csv)), Math.abs(d3.max(d3.csv)));

var y = d3.scale.linear()
.domain([-y0, y0])
.range([height,0])
.nice();

var x = d3.scale.ordinal()
.domain(d3.range(d3.csv.length))
.rangeRoundBands([0, width], .1);


 var color = d3.scale.ordinal()
.range(["#FFFFFF",  "#FF0000", "#FE642E", "#00FF00", "#04B404", "#a05d56", "#d0743c", "#ff8c00"]);

 var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")


var chart2 = d3.select("#graph2")
.append ("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


var div = d3.select("body").append("div")   
.attr("class", "tooltip")               
.style("opacity", 0);

d3.csv("dataanzeigeauto3.asp", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

data.forEach(function(d) {
var y0 = 0
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
d.total = d.ages[d.ages.length - 1].y1;
});


x.domain(data.map(function(d) { return d.State; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]);


chart2.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

chart2.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("dy", ".71em")
  .attr("y", 6)
  .style("text-anchor", "end")
  .text("Anzahl");


var state2 = chart2.selectAll(".state")
  .data(data)
.enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });


state2.selectAll("rect")
.data(function(d) { return d.ages; })  .enter().append("rect")
.attr("class", function(d) { return d < 0 ? "bar negative" : "bar positive"; })
.attr("y", function(d) { return y(Math.max(0, (d.y1))); })
.attr("height", function(d) { return Math.abs(y(d.y0) - y(d.y1)); })
.attr("width", x.rangeBand())
.style("fill", function(d) { return color(d.name); })
  .call(d3.helper.tooltip()
            .attr({class: 'tooltip2'})
            .text(function(d, i){ return d.name + ': '+ (-((d.y0) - (d.y1))) ; })
        );



var legend2 = chart2.selectAll(".legend")
  .data(color.domain().slice().reverse())
.enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 100 + ")"; });

legend2.append("rect")
  .attr("x", width - 30)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

 legend2.append("text")
  .attr("x", width - 35)
  .attr("y", 14)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });

});