Question

我在nvd3.js中成功构建了一个包含多个系列的散点图。 nvd3.js提供了打开/关闭我的数据中“key”定义的系列的机制。是否可以通过指定的形状（即交叉，圆形等）来做同样的事情？我能够以复杂的方式选择具有形状的所有数据点：

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专家，即使经过长时间的研究，也无法在网上找到任何东西。

Answer 1

您可以使用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)将显示所有隐藏点。

Answer 2

我现在使用解决方案解决方案（保留两个数据结构，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();

这样做，整个图表都会更新。控制台上会抛出一些错误，但除了一些小的渲染问题外，它似乎有效。

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

2 个答案: