gpt4 book ai didi

javascript - NVD3/D3 解决系列号更改问题

转载 作者:行者123 更新时间:2023-11-28 06:51:27 25 4
gpt4 key购买 nike

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

在下面的例子中。如果单击图顶部的橙色“正弦波”圆圈,绿线就会变成虚线,这就是我想要防止发生的情况。

这是完整的示例和 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>

最佳答案

这个occurred due a bug此问题已在最新版本中得到修复!

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

关于javascript - NVD3/D3 解决系列号更改问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32925776/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com