如何在d3js中过滤一系列元素？

Question

我需要向下平移鼠标上方的所有元素。 目前，我可以使用.filter过滤选择。 以下代码可以过滤对i> 10的选择。 如何使用mouseover元素的当前ID代替“ 10”。 或者，如果有一种更好的方式来转移进行中的元素，那就太好了。 谢谢

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)) + ')';
            });
    });

住在这里

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

用$(this).attr('id')替换返回的i以获取鼠标悬停的元素的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)) + ')';
            });
    });

[更新] -如果您看到Lars的评论，他正确地指出，如果您要查找的id包含在data ，则可以通过执行d.id而不是通过元素的ID来简单（更有效）地访问它属性。