How to filter a range of elements in d3js?

Question

I need to translate downwards all the elements below the one on which mouse is over. Currently I can filter the selection by using .filter. The following code can filter the selection for elements i>10. How do I use the current id of the mouseover element instead of '10'. Or if there is a better way to shift the proceeding elements, that'll be great. Thanks

var bars = chart.selectAll('.bar')
    .data(data)
    .enter().append('g')
    .attr('class', 'bar')
    .attr('transform', function(d, i) {
        return 'translate(0,' + y(i) + ')';
    })
    .on("mouseover", function(d, i) {
        d3.select(this)
        .filter(function(d,i ) { console.log(this);return i>10 })
            .attr('transform', function(d, i) {
                return 'translate(0,' + (y(i)) + ')';
            });
    });

Live Here

Answer 1

var bubble = d3.layout.pack()
    ...

d3.json("js/data/fortune2009.json", function(json) {

    var node = svg.data([json]).selectAll("g.node")
        .data(bubble.nodes); // filter here?

    node.enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("r", function(d) { return d.r; })
        .attr("class", function(d) { return "q" + color(d.Profit) + "-9"; });

    node.filter(function(d) { return !d.children; })
        .append("text")
        .attr("dy", ".3em")
        .style("text-anchor", "middle")
        .text(function(d) { return d.Company.substring(0, d.r / 3); });
});

Answer 2

replace i in the return with $(this).attr('id') to get the moused-over element's id.

.on("mouseover", function(d, i) {
        d3.select(this)
        .filter(function(d,i ) { console.log(this);return $(this).attr('id') >10 })
            .attr('transform', function(d, i) {
                return 'translate(0,' + (y(i)) + ')';
            });
    });

[Update] - if you see Lars' comment, he correctly points out that if the id you are looking for is contained in your data you can access it by simply (and more efficiently) by doing d.id rather than through the element's id attribute.