d3 通过复选框过滤数据点不能正常工作

Question

我正在尝试允许用户通过以下代码过滤 d3 节点数据点； http://jsfiddle.net/hiwilson1/40yooowa/

但是当您单击 'Filter Data' 按钮时 post cb 选择用户选择的节点不是屏幕上显示的节点。请参阅此处的代码：

function filterData() {

var cbChecked = {};
var newDataSet = [];

d3.select("#cbs").selectAll("input")
.each(function(cb) {
    if(this.checked) {
        cbChecked[this.value] = {name: this.value}
    }
})

d3.keys(cbChecked).forEach(function(key) {
    dataset.forEach(function(dataVal) {
        if (key == dataVal.source.name || key == dataVal.target.name) {
            newDataSet.push({source: dataVal.source.name, target: dataVal.target.name, type: dataVal.type}) 
        }
    })
})  

var fullDataSet = []
dataset.forEach(function(dataVal) {
    fullDataSet.push({source: dataVal.source.name, target: dataVal.target.name, type: dataVal.type})
})


newDataSet.length ? update(newDataSet) : update(fullDataSet)

}

如果我在单击按钮时切换到 filterrData() 函数，使用固定的新数据集（不基于用户输入）那么它工作正常并且 returns 预期结果，但我不认为我根据用户输入构建的数据集与此固定数据集的配置有何不同？

function filterrData()
{   
var newDataSet = [
    {source: "Microsoft", target: "Amazon", type: "licensing"},
    {source: "Microsoft", target: "HTC", type: "licensing"},
    {source: "Samsung", target: "Apple", type: "suit"},
    {source: "Motorola", target: "Apple", type: "suit"},
    {source: "Nokia", target: "Apple", type: "resolved"}
]

update(newDataSet)

}

这当然是基于移动专利诉讼 - http://bl.ocks.org/mbostock/1153292 - 感谢作者。

Answer 1

你的d3代码没有问题，只是click事件没有绑定好。

修复如下：

http://jsfiddle.net/40yooowa/2/

document.getElementsByTagName("input")[0].onclick = function () { filterData() }

d3 通过复选框过滤数据点不能正常工作

d3 filtering over data points via checkboxes not working as it should

javascript

d3.js