2

这是我想要实现的直方图。我只想用绿色（+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 直方图

4

1 回答 1

2

您可以在分配确定突出显示的类时进行检查

.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 。

于 2013-07-24T11:29:24.407 回答