根据形状隐藏nvd3.js散点图中的数据点

Hide data points in nvd3.js scatter chart by shape

本文关键字：散点图 数据 js nvd3 隐藏      更新时间：2023-09-26

我在nvd3.js中成功构建了一个带有几个系列的散点图。Nvd3.js提供了打开/关闭由我的数据中的"键"定义的系列的机制。是否有可能通过指定的形状(即十字，圆形等)做同样的事情?我能够以复杂的方式选择具有形状的所有数据点:

var series = d3.selectAll('.nv-series')
    .data();
for (var i = 0; i < series.length; i++) {
    var values = series[i].values;
    for (var j = 0; j < values.length; j++) {
        if (values[j].shape=='circle') {
              // Do something with 
        }
    }
}

但现在我不需要切换这些。属性"禁用"似乎只适用于系列，而不适用于单个数据点。这里我需要一些类似的东西，这样在隐藏数据点之后，图表就会得到正确的对齐。感谢任何帮助，因为我绝对不是javascript专家，即使经过长时间的研究，也无法在网上找到任何东西。

您可以使用filter向下选择到您想要的元素(而不是循环)，然后使用css隐藏您想要隐藏的形状。

d3.selectAll('.nv-point').filter(function(d){ return d.shape === 'circle' })
  .classed('hidden-point', true);

在这个例子中，hidden-point类将包含visibility: none或一些类似的样式，用该类隐藏点。d3.selectAll('.hidden-point').classed('hidden-point', false)将显示所有隐藏点

我现在用一个变通的解决方案(保留两个数据结构，allData和filteredData，并过滤allData的克隆版本):

//clone data
filteredData = jQuery.extend(true, {}, allData);
for (var i = 0; i < filteredData.length; i++) {
    var values = filteredData[i].values;
    for (var j = 0; j < values.length; j++) {
        if (values[j].shape!=shape) {
            filteredData[i].values.splice(j,1);
            j--;
        }
    }
}
d3.select('#test1 svg').datum(filteredData);
chart.update();

这样做，整个图得到更新。有一些错误抛出控制台，但除了一些小的渲染问题，它似乎工作。

相关文章：