Question

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

但是，当您单击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（），使用固定的新数据集（不是基于用户输入）那么它工作正常并返回预期结果，但我不认为数据集我是基于用户输入构建的是否与此固定数据集配置不同？

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通过复选框过滤数据点不能正常工作

1 个答案: