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

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

代码：

例如：

我想这样做，但I的值不是我发送的y值。已对其进行了修改：

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

数据：

你可以做：

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

---

向上的答案是正确的，但在我的例子中，当您动态更改数据时，它将不起作用

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

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（）。

在使用

linePlusBarChart

时不起作用。未定义

BarColor

功能。

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;
  };