[英]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.