javascript - 如何选择特定的d3节点组元素

Question

我有一个带有多个节点的 D3 v4 力模拟。每个节点都有一个组。当我将鼠标悬停在该组的一个元素(一个不可见的圆圈)上时，我希望其他元素之一(仅在该特定节点上的红色圆圈，我给出了“backcircle”的 id)执行某些操作。目前这就是我所拥有的，但它对所有节点都执行此操作，而不仅仅是我将鼠标悬停在其上的元素。

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

Answer 1

首先，有两个重要提示:

1. 请勿在 SVG 中使用“透明”。
2. ID 是唯一的。因此，请改用类(或通过标签名称进行选择)

回到你的问题:

有多种方法可以根据同级圆形元素选择圆形元素。第一个是使用 this.parentNode 在 DOM 上向上移动并再次向下移动。第二个，如果您确切知道 sibling 的顺序，则使用 previousSibling。

在以下演示中，每组有 3 个元素:一个圆形、一个文本和一个矩形。将鼠标悬停在矩形上将选择圆形。

首先，带有 this.parentNode 的选项。在你的情况下:

d3.select(this.parentNode).select(".backCircle")

将鼠标悬停在方 block 上:

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)

将鼠标悬停在方 block 上:

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)。