如何过滤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)) + ')';
            });
    });

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

将返回中的i 替换为$(this).attr('id') 以获取鼠标悬停元素的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 属性。