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

Question

美好的一天，

在使用 dimple.js 的 JS 模块中，我尝试制作一个 add/remove 趋势特征。

这样做的方式，我add/remove系列。

添加代码为：

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, by ne8il 进行了比较，它们几乎做同样的事情，但有效。

数据是在图表创建时定义还是在系列中定义都没有影响。
真正的问题在于 'dimple-plot-line' 的选择。事实上，正如这个新 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

希望对以后的人有所帮助！

Answer 2

从使用版本 dimple.v2.1.6 的线图开始 - 线图显示正常。但是，升级到 dimple.v2.3.0.min.js 后图表无法使用。类似的错误信息。

已将图表类型切换为 dimple.plot.bubble。效果：没有错误。所有元素都正确显示，但显示为气泡。

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

D3 error when adding a serie in dimple JS

javascript

d3.js

dimple.js