dimple.js 按图例过滤数据给出错误

Posted 2023-02-16

【中文标题】dimple.js 按图例过滤数据给出错误

【英文标题】：dimple.js filter data by legend gives error

【发布时间】：2017-01-07 16:30:30

【问题描述】：

我正在使用酒窝条形图图例来过滤图表的数据，如本小提琴 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”

知道什么可能导致此错误吗？

【问题讨论】：

艾玛，看起来那可能只出现在谷歌浏览器上。当我尝试使用 IE 时，我没有在控制台中显示该错误。

我会查查的。感谢您的提示。

您是否弄清楚导致该问题的真正原因是什么？如果你这样做了，请与我们分享。谢谢

不幸的是，dimplejs 似乎不再维护了。我对 d3 提出的相同问题得到了审查，他们说这是酒窝的问题

@Emma 你介意链接那个问题吗？如果有人能解决这个问题，那就太好了。

【参考方案1】：

不确定是什么导致了错误。

我的直觉告诉我的是，由于在使用新数据重绘图表时正在访问前一组数据中的形状，因为它们是内存中的单独对象。也就是说，数据生成的系列存在于图表的 svg 对象中，但在重新绘制图表之前与数据的变化无关。如果这是真的，那可能就是为什么它没有找到轴的值来绘制住在那里的形状。 （不知道以后有没有静默失败的选项）。

无论如何，如果您要重新绘制图表，您可以使用以下解决方法：

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

它很脏，但它可以工作。

编辑：Here's 相关的 github 问题。