问如何选择特定的d3节点组元素
EN

Stack Overflow用户

提问于 2017-11-19 21:05:40

回答 2查看 3.6K关注 0票数 2

我有一个有几个节点的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))

javascript

d3.js

负载均衡 CLB

CLB 提供流量分发服务，轻松应对大流量场景

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-11-20 00: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)。

票数 2

Stack Overflow用户

发布于 2017-11-19 22: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))