CODEWITHSUNDEEP
javascriptd3.js
hwilson1
hwilson1

Reputation: 499

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

I'm trying to allow a user to filter over d3 node data points via the following code; http://jsfiddle.net/hiwilson1/40yooowa/

However when you click the 'Filter Data' button post cb selection the nodes the user has selected aren't the nodes displayed onscreen. See code here:

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)

}

If I toggle to function filterrData() on button click, with a fixed new data set (not based on user input) then it works just fine and returns expected results, but I don't think the data set I've built based on user input is configured any differently to this fixed data set?

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)

}

This is of course based on Mobile Patent Suits - http://bl.ocks.org/mbostock/1153292 - so credit to the author.

Upvotes: 0

Views: 481

Answers (1)

Benjamin Toueg
Benjamin Toueg

Reputation: 10867

Your d3 code works just fine, it's just the click event that has not been bound properly.

Here is the fix:

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

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

Upvotes: 1

Related Questions