javascript - 相同时间戳的 nvd3 正值和负值

Question

使用 nvd3库 我正在尝试在条形图中显示相同“x”值的正值和负值“y”(如两个倒转条)。值正在显示，但负值也绘制在 y 轴的正刻度上。

如果我只显示负值，它可以正常工作，但在这两种情况下，它都不会按预期工作。

下面是我目前在我的代码中的内容:

var chart;
nv.addGraph(function() {
  chart = nv.models.historicalBarChart();
  chart.useInteractiveGuideline(true);
  chart.xAxis.axisLabel("Time (s)");
  chart.yAxis.axisLabel('Voltage (v)');

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

  nv.utils.windowResize(chart.update);
  return chart;
});

function sinAndCos() {
  var sin = [], cos = [];
    
  for (var i = 0; i < 100; i++) {
    sin.push({
      x: i,
      y: i
    });

    cos.push({
      x: i,
      y: -(i)
    });
  }

  return [
  {
      values: sin,
      key: "Sine Wave",
      color: "#ff7f0e"
    },
    {
      values: cos,
      key: "Cosine Wave",
      color: "#2ca02c"
    }
  ];
}

 text {
   font: 12px sans-serif;
 }

 svg {
   display: block;
 }

 html, body, #chart, svg {
   margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet"/>

<div id="chart">
  <svg></svg>
</div>

这是重现问题的 JSFiddle 链接:https://jsfiddle.net/prerak6962/a1zh9o4e/14/

有什么我遗漏或需要补充的吗？

Answer 1

使用不同的条形图可以获得更好的结果

• chart = nv.models.discreteBarChart();
• chart = nv.models.multiBarChart();

var chart;
nv.addGraph(function() {
  //chart = nv.models.historicalBarChart();
  chart = nv.models.multiBarChart();
  //chart.useInteractiveGuideline(true);
  chart.xAxis.axisLabel("Time (s)");
  chart.yAxis.axisLabel('Voltage (v)');

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

  nv.utils.windowResize(chart.update);
  return chart;
});

function sinAndCos() {
  var sin = [], cos = [];
    
  for (var i = 0; i < 100; i++) {
    sin.push({
      x: i,
      y: i
    });

    cos.push({
      x: i,
      y: -(i)
    });
  }

  return [
  {
      values: sin,
      key: "Sine Wave",
      color: "#ff7f0e"
    },
    {
      values: cos,
      key: "Cosine Wave",
      color: "#2ca02c"
    }
  ];
}

 text {
   font: 12px sans-serif;
 }

 svg {
   display: block;
 }

 html, body, #chart, svg {
   margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet"/>

<div id="chart">
  <svg></svg>
</div>