NVD3/D3 解决序列号更改问题

Question

遵循 here 中关于将市场添加到折线图的指导。我运行遇到一个问题，如果您禁用具有标记的特定行，下一行将成为标记。我想防止这种情况发生。添加或删除特定行时，每行的序列号 g.nv-series-0 会发生变化，这就是发生这种情况的原因。是否有解决方法来防止这种情况发生？

在下面的例子中。如果您单击绘图顶部的 o运行ge "sine wave" 圆圈，绿线变为虚线，这就是我想要防止发生的情况。

这是完整的例子，jsfiddle:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css" rel="stylesheet">
<style>
#chart svg {
  height: 400px;
}
#chart g.nv-scatter g.nv-series-0 path.nv-point
{
    fill-opacity: 1;
    stroke-opacity: 1;
}
#chart g.nv-series-0 path.nv-line
{
    stroke-opacity: 0;
}

</style>
</head>
<body>
<div id="chart">
  <svg></svg>
</div>
<script type="text/javascript">
data = function() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10), shape: 'square'});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: 'Sine Wave',
      color: '#ff7f0e'
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    }
  ];
}
nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time (ms)')
      .tickFormat(d3.format(',r'));

  chart.yAxis
      .axisLabel('Voltage (v)')
      .tickFormat(d3.format('.02f'));

  d3.select('#chart svg')
      .datum(data())
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});
</script>
</body>
</html>

Answer 1

此 occurred due a bug 已在最新版本中修复！

我们现在可以设置和访问 css 中的 classed 属性。

NVD3/D3 解决序列号更改问题

NVD3/D3 work around for series number changing

javascript

d3.js

nvd3.js