0
ディンプル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を破壊し、再描画が、これはアニメーション効果を失うことになる可能性が）
UPDATE：私は部分的な解決策を見つけた
。チャートが更新されるたびに、一連の目に見えないマーカーが各データポイントに追加されますが、削除されることはありません。手動で）これは（.drawの前に置かれ
d3.selectAll(".dimple-custom-line-marker").remove();
を使用してそれらを削除することができ ：
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);
});
（NB：あなたは ".dimple-マーカー" ではなく」.dimple-特注が必要になる場合があります
これはFirefoxでは問題なく動作しますが、ChromeやSafariでチャートがフリーズすることがあります。コンソールのエラーメッセージは、次のように表示されます。
TypeError: Cannot read property 'key' of undefined
at SVGCircleElement.<anonymous> (https://www.../js/dimple.v2.3.0.min.js:2:16003)
....