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.

这是一个重现问题的小提琴; 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日更新。 我大部分时间都在这个工作，我找到了一些有趣的东西，比较我的小提琴http://jsbin.com/fasamexehe/edit?js,output，ne8il，它几乎完全相同，但是有效。

数据是在图表创建时还是在系列内定义的，没有任何影响。
真正的问题在于＆＃39; dimple-plot-line＆＃39;选择。事实上，正如在这个新的小提琴中所展示的那样：http://jsbin.com/fasamexehe/edit?js,output，如果它被＆＃39; dimple-plot-bubble＆＃39;取代，使用相同的代码，它就会起作用。

现在问题变成：为什么它适用于气泡而不是线？

Answer 1

我终于明白了。

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

用于表示数据点的圆圈，不透明度为0.
连接它们的路径，可见。

但是，数组serie.shapes仅包含后者。因此，如果使用serie.shapes.remove删除系列，则圆圈会保留在图表中，并且在下一次构建图表的过程中，它们会阻碍。

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

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

以下是初始问题中小提琴的更正版本：http://jsbin.com/qororekoqe/edit?js,output

我希望将来帮助某人！

Answer 2

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

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

在dimple JS

2 个答案: