如何选择特定的d3节点组元素
如何选择特定的d3节点组元素
提问于 2017-11-20 05:05:40
我有一个有几个节点的D3 v4力模拟。每个节点都有一个组。当我鼠标移动到这个组中的一个元素(一个看不见的圆)上时，我希望其他元素(仅在那个特定节点上的红色圆圈，它是我给出的id“back圆形”)来做一些事情。目前，这就是我所拥有的，但是它对所有节点都是这样的，而不仅仅是我在元素上徘徊的那个节点。
this.node = this.d3Graph.selectAll(null)
.data(this.props.nodes)
.enter()
.append("g")
.attr("class", "nodes");
this.node.append("circle")
.attr("id", "backCircle")
.attr("r", 60)
.attr("fill", "red")
this.node.append("svg:image")
.attr("xlink:href", function(d) { return d.img })
.attr("height", 60)
.attr("width", 60)
.attr("x", -30)
.attr("y", -30)
this.node.append("circle")
.attr("r", 60)
.attr("fill", "transparent")
.on( 'mouseenter', function(d) {
d.r = 65;
this.node.select("#backCircle")
.transition()
.attr("r", 80);
}.bind(this))回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-20 08:30:28
在做其他事情之前，有两个重要的建议：
- 不要在SVG中使用
"transparent"。 - ID是唯一的。因此，使用类代替(或按标签名选择)
回到你的问题：
有几种基于兄弟圆元素选择圆元素的方法。第一种方法是使用this.parentNode，使DOM继续上升，然后再次下降。第二个，如果您确切地知道兄弟姐妹的顺序，则使用previousSibling。
在下面的演示中，我每个组有3个元素:一个圆、一个文本和一个矩形。悬停在矩形上将选择圆圈。
首先，使用this.parentNode的选项。就你而言：
d3.select(this.parentNode).select(".backCircle")悬停在广场上：
var svg = d3.select("svg");
var data = [50, 150, 250];
var g = svg.selectAll(null)
.data(data)
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d + ",75)"
});
g.append("circle")
.attr("class", "backCircle")
.attr("r", 40)
.attr("fill", "teal")
g.append("text")
.attr("font-size", 20)
.attr("text-anchor", "middle")
.text("FOO");
g.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 20)
.attr("height", 20)
.style("fill", "firebrick")
.on("mouseenter", function() {
d3.select(this.parentNode).select(".backCircle")
.transition()
.attr("r", 50)
}).on("mouseleave", function() {
d3.select(this.parentNode).select(".backCircle")
.transition()
.attr("r", 40)
})<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
然后，使用previousSibling选项(在这里，您甚至不需要设置一个类)。就你而言：
d3.select(this.previousSibling.previousSibling)悬停在广场上：
var svg = d3.select("svg");
var data = [50, 150, 250];
var g = svg.selectAll(null)
.data(data)
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + d + ",75)"
});
g.append("circle")
.attr("r", 40)
.attr("fill", "teal")
g.append("text")
.attr("font-size", 20)
.attr("text-anchor", "middle")
.text("FOO");
g.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 20)
.attr("height", 20)
.style("fill", "firebrick")
.on("mouseenter", function() {
d3.select(this.previousSibling.previousSibling)
.transition()
.attr("r", 50)
}).on("mouseleave", function() {
d3.select(this.previousSibling.previousSibling)
.transition()
.attr("r", 40)
})<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
PS:请记住，由于我没有使用对象，所以在我的代码片段中不需要使用bind(this)。
Stack Overflow用户
发布于 2017-11-20 06:21:39
我认为您需要从其处理程序中选择触发mouseenter事件的节点。
this.node.append("circle")
.attr("r", 60)
.attr("fill", "transparent")
.on( 'mouseenter', function(d) {
var mouseenterNode = d3.select(this)
mouseenterNode.attr("r", 65);
mouseenterNode.select("#backCircle")
.transition()
.attr("r", 80);
}.bind(this))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47385361
复制相关文章
相似问题
腾讯云开发者
