dimple.js凡例でデータをフィルタリングするとエラーが発生します

Question

私はこのフィドルhttps://jsfiddle.net/fbpnzy9u/で与えられているようにディンプルバーチャートの凡例を使ってチャートのデータをフィルタリングしています。

var svg = dimple.newSvg("#chartContainer", 590, 400); 
var data = [ 
    { Animal: "Cats", Value: (Math.random() * 1000000) }, 
    { Animal: "Dogs", Value: (Math.random() * 1000000) }, 
    { Animal: "Mice", 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("Animal", dimple.plot.bar); 
var legend = myChart.addLegend(500,10,100, 100, "right"); 
myChart.draw(); 

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

// filter 
    myChart.legends = []; 

    // Get a unique list of y values to use when filtering 
    var filterValues = dimple.getUniqueValues(data, "Animal"); 

    // Get all the rectangles from our now orphaned legend 

    legend.shapes.selectAll('rect').on("click", function (e) { 

    // This indicates whether the item is already visible or not 
    var hide = false; 
    var newFilters = []; 
    //If the filters contain the clicked shape hide it 

    filterValues.forEach(function (f) { 
     if (f === e.aggField.slice(-1)[0]) { 
     hide = true; 
     } else { 
     newFilters.push(f); 
     } 
    }); 

    if (hide) { 
     d3.select(this).style("opacity", 0.2); 
    } else { 
     newFilters.push(e.aggField.slice(-1)[0]); 
     d3.select(this).style("opacity", 0.8); 
    } 
    // // Update the filters 
    filterValues = newFilters; 
    //Filter the data 
    myChart.data = dimple.filterData(data, "Animal", filterValues); 
    myChart.draw(800); 
}); 

期待通りのフィルタリングが発生したものの、それはコンソールにD3エラーがスローされます。 エラー：属性X：予想される長さ、「NaNの」

任意のアイデアこのエラーを引き起こす可能性のあるものになど？

Answer 1

エラーの原因は不明です。

私の直感は、グラフが新しいデータで再描画されているときに、以前のデータセットのシェイプにアクセスしているためです。つまり、データはグラフのsvgオブジェクトに存在する系列を生成しますが、グラフが再描画されるまでデータの変更に結び付けられることは決してありません。これが本当であれば、そこにある形状を描くために軸の値を見つけられないのかもしれません。 （将来的には静かに失敗するオプションがあるのだろうと思う）。

if (oldChartData.length > newChartData.length) { 
    chart.svg.selectAll('*').remove(); 
    createChart(newChartData); 
} 

それは汚いですが、それは動作します：あなたがチャートを再描画している場合

とにかく、あなたはこの回避策を行うことができます。

編集：Here's関連するgithubの問題。