CODEWITHSUNDEEP
javascriptjquerygraphd3.jsrickshaw
Ash
Ash

Reputation: 237

Filtering option in D3

I am working on D3(Rickshaw framework) where I have to filter the data using the name.

Here is the code which rickshaw uses for creating the circle.

var nodes = graph.vis.selectAll("path").data(series.stack.filter(function(d) {
    return d.y !== null
})).enter().append("svg:circle").attr("cx", function(d) {
    return graph.x(d.x)
}).attr("cy", function(d) {
    return graph.y(d.y)
}).attr("fill-opacity", 1.0).attr('transform', 'translate(22,0)').attr("r", function(d) {
    return ("r" in d) ? d.r : graph.renderer.dotSize
});

I tried to filter the data like

$('#BestBrands input').on("change", function () {   
    console.log("called")
    var selected = $(this).attr('name'),
        display = this.checked ? "inline" : "none";
    console.log(selected)

    graph.vis.selectAll(".filter")
        .data(series.stack.filter(function(d) {
            return series.name[0] == selected
        }))    
        .attr("display", display);
});

//series.name is equal to d.name in d3.js so series[0] is first co-ordinates name It`s not working. Do I need to append any class in the class? I am not clear with this. What should I do here to filter the data according to the name?

Upvotes: 1

Views: 365

Answers (2)

TecHunter
TecHunter

Reputation: 6131

If I understood your code :

graph.vis.selectAll("path")
  .data(series.stack.filter(function(d){
        //should return a boolean
        return selected === 'something';
       }))
    .attr("display", display);
});

EDIT :

$('#BestBrands input').on("change", function () {   
    console.log("called")
    var selected = $(this).attr('name'),
        display = this.checked ? "inline" : "none";
    console.log(selected)

    graph.vis.selectAll(".filter")
        .data(series.stack.filter(function(d) {
            return series[0].name == selected //assuming series[] is an array
        }))    
        .attr("display", display);
});

Upvotes: 1

zdyn
zdyn

Reputation: 2173

It looks like you intend to use var selected = $(this).attr('name') but never compare it to anything.

In this line:

series.stack.filter(function(d){ return d.selected })

I suspect you want to compare d.selected to selected. Now, this is just me assuming (and you know what they say about assuming), but given my experience with D3, series.stack.filter will iterate over the elements in series.stack, so you'll need to make sure that d.selected is the property that you want.

Upvotes: 0

Related Questions