javascript - d3 正负条形图(有差异的直方图)

Question

这是我想要实现的直方图。我只想用绿色(+ve)或红色(-ve)突出显示最后的变化，其他颜色用灰色。我也想要 x 轴上的分隔符。

最后的更改必须突出显示其他不应该的!!例如:[2,-3,4,5,-5] 我应该只得到 -5 的红色!不适用于 -3。

这是我尝试过的:http://jsfiddle.net/pYZn8/12/

var data = [{"date":"12/7","value": 0.4398280448668004}, {"date":"b","value": -0.7455357306299817}, 
{"date":"5/7","value": 4}, 
{"date":"6/7","value": 5}];
var z = _.max(data, function(k){ return k.value; });
console.log(z);

var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = 200 - margin.left - margin.right, 
 height = 200 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");
var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

var svg = d3.select("body").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 x0 = Math.max(-d3.min(data), d3.max(data));
     x.domain(data.map(function(d) { return d.date; }));
     y.domain([d3.min(data, function(d) { return d.value; }), d3.max(data, function(d) { return d.value; })]);

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

  svg.selectAll(".bar")
      .data(data).enter().append("rect")
      .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
      .attr("x", function(d, i) { return x(d.date); })
      .attr("y", function(d, i) { return y(Math.max(0, d.value));})
      .attr("width", x.rangeBand())
      .attr("height", function(d) { return Math.abs(y(d.value) - y(0)); });

一些对我有部分帮助的相关问题:

d3.js histogram with positive and negative values

Answer 1

您可以在分配决定高亮的类时进行检查

.attr("class", function(d, i) {
      var clas = "";
      negative: if(d.value < 0) {
          for(var j = i+1; j < data.length; j++) {
              if(data[j].value > 0) break negative;
          }
          clas = "bar negative";
      }
      positive: if(d.value > 0) {
          for(var j = i+1; j < data.length; j++) {
              if(data[j].value < 0) break positive;
          }
          clas = "bar positive";
      }
      return clas;
  })

已更新 jsfiddle here .