Question

这是我想要实现的直方图。我想仅使用绿色（+ ve）或红色（-ve）其他灰色突出显示最后的更改。我也希望在x轴上有一个分离器。

最后的变化必须突出显示别人不应该!!例如：[2，-3,4,5，-5]我应该只有-5的红色！不是-3。

Histogram With Negative and positive value i want to achieve

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。

d3负和正条形图（有差异的直方图）

1 个答案: