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问题。

dimple.js按照图例过滤数据会产生错误

1 个答案: