簡體   English   中英

如何在d3js中過濾一系列元素?

[英]How to filter a range of elements in d3js?

我需要向下平移鼠標上方的所有元素。 目前,我可以使用.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)) + ')';
            });
    });

古騰堡 住在這里

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

$(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來簡單(更有效)地訪問它屬性。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM