javascript - 在dimple JS中添加系列时出现D3错误

Question

美好的一天，

在使用dimple.js的JS模块中，我尝试制作添加/删除趋势功能。

完成的方式是，我添加/删除系列。

添加代码为:

chart.addSeries(tag_list[i].name, dimple.plot.line)

删除代码是:

//Remove already drawn points.
chart.series[i].shapes.remove();
//Remove from series array.
chart.series.splice(i,1);

添加部分工作正常。删除部分也是如此。

但是，每当我尝试再次添加之前删除的系列时，我都会收到有关选择新系列的 D3 错误:

Error: <circle> attribute cx: Expected length, "NaN".    
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': '.dimple-marker.dimple-series-1.' is not a valid selector.

这是一个重现该问题的 fiddle ； http://jsbin.com/lezigoheyo/edit?js,output第一次单击切换会添加新趋势。第二次单击将其删除。第三次触发错误。

这让我相信我在某个地方有一些坏数据，这阻止了系列的绘制。

但是，我对我的数据非常有信心，因为首先，它在我第一次添加时有效，然后，我添加用于调试目的:

    for (var j = 0; j < chart.series; j++) {
        for (var k = 0; k < chart.series[j]; k++) {
            if (!$.isNumeric(chart.series[j].data[k].value)) {alert("value error");}
            if (!$.isNumeric(chart.series[j].data[k].time)) {alert("time error");}
        }
    }

并且它不会触发。

我尝试添加它而不先删除它，效果很好，因此我可以合理地将问题缩小到删除部分，但我不明白我出了什么问题。

希望大家能帮我解决这个问题。

祝你有美好的一天，

6 月 8 日更新。我已经花了大半夜的时间来研究这个问题，我发现了一些有趣的事情，将我的 fiddle 与 http://jsbin.com/fasamexehe/edit?js,output 进行比较, 作者 ne8il ，它几乎做同样的事情，但是有效。

• 数据是在图表创建时定义的还是在系列内定义的都没有影响。
• 真正的问题在于“酒窝情节线”的选择。事实上，正如这个新 fiddle 所示:http://jsbin.com/fasamexehe/edit?js,output ，如果用'dimple-plot-bubble'替换，使用相同的代码，它就可以工作。

现在的问题是:为什么它适用于气泡而不适用于线条？

Answer 1

我终于明白了。

dimple-plot-line 在 svg 中创建两种对象:

• 圆圈代表数据点，不透明度为 0。
• 连接它们的路径，可见。

但是，数组serie.shapes仅包含后者。因此，如果使用 serie.shapes.remove 删除系列，圆圈仍保留在图表中，并且在下次尝试构建图表时，它们会妨碍。

正确删除dimple-plot-line的解决方案是使用d3选择器获取所有涉及的形状，并将其删除。因此最终的解决方案，其中 i 是要删除的系列的索引:

d3.selectAll(".dimple-series-" + i).remove();

这是最初问题中 fiddle 的更正版本:http://jsbin.com/qororekoqe/edit?js,output

我希望它对将来的人有所帮助!