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

【问题标题】：Hide data points in nvd3.js scatter chart by shape按形状隐藏 nvd3.js 散点图中的数据点
【发布时间】：2014-07-16 17:13:11
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案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) 将显示所有隐藏点。

【讨论】：

非常感谢，这绝对适用于选择形状的所有元素（CSS 应该是可见性：隐藏，我们甚至可以直接使用 .style() 设置它）。但是，还有两个问题：1) 布局似乎不适应元素的可见性 2) 创建的任何工具提示仍然有效。我还有另一个想法可以尝试：过滤掉我在内存中设置的数据的克隆，并用这些数据重建图表。

【解决方案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();

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

【讨论】：