Question

我正在使用dimple js库来绘制堆积区域图表。我想根据用户输入更新数据。

我有一个工作示例，在视觉上看起来正确，但是在每次更新时，有更多元素被添加到svg中，因此在图表的一些更新之后，脚本明显变慢。

下面是一个说明问题的示例脚本。它是根据与更新凹坑条形图相关的答案改编的： Update dimple.js chart when select a new option

实施例：

<div id="chartContainer"></div>      
<button id="btn">Click Me</button>    

<script type="text/javascript">

    var svg = dimple.newSvg("#chartContainer", 590, 400);
    var data = [
        { Animal: "Cats", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Cats", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Cats", Series: "3", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "3", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "3", Value: (Math.random() * 1000000) }
    ];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)

    var x = myChart.addCategoryAxis("x", "Animal"); 
    x.addOrderRule(["Cats", "Dogs", "Mice"]);

    myChart.addMeasureAxis("y", "Value");
    myChart.addSeries("Series", dimple.plot.area);
    myChart.draw();

    d3.select("#btn").on("click", function() {
        myChart.data = [
            { Animal: "Cats", Series: "1", Value: (Math.random() * 1000000) },
            { Animal: "Dogs", Series: "1", Value: (Math.random() * 1000000) },
            { Animal: "Mice", Series: "1", Value: (Math.random() * 1000000) },
            { Animal: "Cats", Series: "2", Value: (Math.random() * 1000000) },
            { Animal: "Dogs", Series: "2", Value: (Math.random() * 1000000) },
            { Animal: "Mice", Series: "2", Value: (Math.random() * 1000000) },
            { Animal: "Cats", Series: "3", Value: (Math.random() * 1000000) },
            { Animal: "Dogs", Series: "3", Value: (Math.random() * 1000000) },
            { Animal: "Mice", Series: "3", Value: (Math.random() * 1000000) }
        ];
        myChart.draw(1000);
    });

</script>

如何干净地更新这样的区域图表，以便删除以前的所有数据？（我可以销毁svg并重绘，但这会失去动画效果）

由于

更新：

我找到了部分解决方案。每次更新图表时，都会在每个数据点添加一系列不可见的标记，但不会将其删除。您可以使用

手动删除它们

d3.selectAll(".dimple-custom-line-marker").remove();

这是放在.draw（）之前：

d3.select("#btn").on("click", function() {
    myChart.data = [
        { Animal: "Cats", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "1", Value: (Math.random() * 1000000) },
        { Animal: "Cats", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "2", Value: (Math.random() * 1000000) },
        { Animal: "Cats", Series: "3", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Series: "3", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Series: "3", Value: (Math.random() * 1000000) }
    ];

    d3.selectAll(".dimple-custom-line-marker").remove();

    myChart.draw(1000);
});

（注意：如果区域图只有一个系列，你可能需要“.dimple-marker”而不是“.dimple-custom-line-marker”）

这在Firefox中运行良好，但有时在Chrome或Safari中图表会冻结。控制台中的错误消息显示为：

TypeError: Cannot read property 'key' of undefined
     at SVGCircleElement.<anonymous> (https://www.../js/dimple.v2.3.0.min.js:2:16003)
     ....

Answer 1

对我来说效果不好。我发现这个效果要好得多。将它放在myChart.draw(xxxx);之前。最好有400ms的快速抽取，使其看起来干净。

svg.selectAll(".dimple-marker,.dimple-marker-back").remove();

更新Dimple面积图上的数据时未删除标记

1 个答案: