svg - NVD3.js 为图中的特定条形着色

Question

有没有办法给特定的条上色？如果一个条小于该线，则将其涂成红色。

代码：https ://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html

示例：http ://tvinci.github.io/webs/lineplusbar.html

我想做这样的事情，但 i 的值不是我发送的 y 值。它已被修改：

d3.selectAll("rect.nv-bar")
    .style("fill", function(d, i){
        return i > 50 ? "red":"blue";
    });

数据：

var overview_data=[
     {
        "key" : "Achieved",
        "bar": true,
        "values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ]
     },
     {
        "key" : "Required",
        "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ]
     }
].map(function(series) {
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
    return series;
});

Answer 1

你可以做：

d3.selectAll("rect.nv-bar")
    .style("fill", function(d, i){
        return d.y > 50 ? "red":"blue";
    });

Answer 2

向上的答案是正确的，但是当您在我的情况下动态更改数据时它将不起作用。

您可以使用以下配置根据值获取不同的条形颜色。

var data=[ {
        "key": "data",
        "values": [
          {
            "x": 1,
            "y": 20
          },
          {
            "x": 2,
            "y": 15
          },
          {
            "x": 3,
            "y": 85
          },
          {
            "x": 4,
            "y": 66
          },}];

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .barColor(getColorArrayForGraph())
      .transitionDuration(350)
      .reduceXTicks(true)   
      .rotateLabels(0)      
      .showControls(true)   
      .groupSpacing(0.1);
    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart1 svg')
        .datum(data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
}

 // GET color array based on the value
  function getColorArrayForGraph() {
    let colorArray: any = [];
    for (let item of data) {
      if (item.y > 50) {
        colorArray.push('#FF0000');
      } else {
        colorArray.push('#004c00');
      }
    }
    return colorArray;
  };

所以在这里，barcolor(["#FF0000","#00FFCC",....])函数将参数作为颜色数组。

通过这种方式，您可以获得颜色数组并将其用于 barcolor()。