Question

我有以下代码。

点击一个按钮，它会添加一个圆圈，在盘旋时会显示一个红色正方形，并在mouseout上隐藏它。对于一个圆圈，它完美地运作。但是因为我使用d3.selectAll，当有多个圆圈时，它会显示并隐藏在一个圆圈上的所有红色矩形。

有没有办法选择与使用d3.select或d3.selectAll悬停的圆相关联的矩形？

为了在代码中演示问题我已经添加了3个圆圈可以正确添加

＆＃13;

$(document).ready(function() {
  var width = 560,
    height = 500;
  var i = -1;
  valArray = [100, 200, 300, 400];
  var svg = d3.select('#canvas')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  $("#add").click(function() {
    i++;


    var g = svg.append('svg:g')
      .attr('x', valArray[i])
      .attr('y', valArray[i]);

    var yesDecision = g.append('svg:rect')
      .style('fill', "#D64541")
      .attr("width", "50")
      .attr("height", "50")
      .attr("id", "yesDecision")
      .attr("class", "hoverNode")
      .attr("x", valArray[i])
      .attr("y", valArray[i]);

    g.append('svg:text')
      .attr('x', valArray[i])
      .attr('y', valArray[i])
      .attr('class', 'id hoverNode')
      .text(function(d) {
        return "Yes";
      });

    g.append('svg:circle')
      .attr('class', 'node')
      .attr('r', 40)
      .attr('cx', valArray[i])
      .attr('cy', valArray[i])
      .style('fill', function(d) {
        return ("#ccc");
      }).on('mouseover', function(d) {
        d3.selectAll(".hoverNode").style("visibility", "visible")
      })
      .on('mouseout', function(d) {
        d3.selectAll(".hoverNode").style("visibility", "hidden")
      })

  });
});

＆＃13;

.hoverNode {
  visibility: hidden;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add element</button>
<div id="canvas">
</div>

＆＃13;

Answer 1

一种解决方案是根据i：

为每个矩形设置一个特定的类

var yesDecision = g.append('rect')
    .attr("class", "hoverNode" + i)

为圈子做同样的事情：

g.append('circle')
    .attr('class', 'node' + i)

然后，在鼠标悬停和鼠标移动中，根据圆圈类选择矩形：

.on('mouseover', function(d) {
    var elementID = d3.select(this).attr("class").slice(-1);
    d3.selectAll(".hoverNode" + elementID).style("visibility", "visible")
})
.on('mouseout', function(d) {
    var elementID = d3.select(this).attr("class").slice(-1);
    d3.selectAll(".hoverNode" + elementID).style("visibility", "hidden")
})

以下是工作代码（点击“运行代码段”）：

var width = 560,
    height = 500;
  var i = -1;
  valArray = [50, 120, 190, 260];
  var svg = d3.select("#chart")
    .append("svg")
    .attr('width', width)
    .attr('height', height);

  d3.select("#add").on("click", function() {
    i++;

    var g = svg.append('g')
      .attr('x', valArray[i])
      .attr('y', valArray[i]);

    var yesDecision = g.append('rect')
      .style('fill', "#D64541")
      .attr("width", "50")
      .attr("height", "50")
      .attr("id", "yesDecision")
			.style("visibility", "hidden")
      .attr("class", "hoverNode" + i)
      .attr("x", valArray[i])
      .attr("y", valArray[i]);

    g.append('circle')
      .attr('class', 'node' + i)
      .attr('r', 40)
      .attr('cx', valArray[i])
      .attr('cy', valArray[i])
      .style('fill', function(d) {
        return ("#ccc");
      }).on('mouseover', function(d) {
			var elementID = d3.select(this).attr("class").slice(-1);
        d3.selectAll(".hoverNode" + elementID).style("visibility", "visible")
      })
      .on('mouseout', function(d) {
			var elementID = d3.select(this).attr("class").slice(-1);
        d3.selectAll(".hoverNode" + elementID).style("visibility", "hidden")
      })
    
      g.append('text')
      .attr("x", valArray[i])
      .attr("y", valArray[i])
      .style("visibility", "hidden")
      .attr("pointer-events", "none")
      .attr('class', 'id hoverNode' + i)
      .text("Yes");

  });

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id="add">Add</button>
<div id="chart"></div>

Answer 2

您可以将rect作为数据绑定到circle，然后在鼠标事件中访问rect：

no values to enumerate

以下是您编辑的代码：

g.append('svg:circle')
      .data([yesDecision])
      .attr('class', 'node')
      .attr('r', 40)
      .attr('cx', valArray[i])
      .attr('cy', valArray[i])
      .style('fill', function(d) {
        return ("#ccc");
      }).on('mouseover', function(d) {
        d.style("visibility", "visible")
      })
      .on('mouseout', function(d) {
        d.style("visibility", "hidden")
      })

$(document).ready(function() {
  var width = 560,
    height = 500;
  var i = -1;
  valArray = [100, 200, 300, 400];
  var svg = d3.select('#canvas')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

  $("#add").click(function() {
    i++;


    var g = svg.append('svg:g')
      .attr('x', valArray[i])
      .attr('y', valArray[i]);

    var yesDecision = g.append('svg:rect')
      .style('fill', "#D64541")
      .attr("width", "50")
      .attr("height", "50")
      .attr("id", "yesDecision")
      .attr("class", "hoverNode")
      .attr("x", valArray[i])
      .attr("y", valArray[i]);

    g.append('svg:text')
      .attr('x', valArray[i])
      .attr('y', valArray[i])
      .attr('class', 'id hoverNode')
      .text(function(d) {
        return "Yes";
      });

    g.append('svg:circle')
      .data([yesDecision])
      .attr('class', 'node')
      .attr('r', 40)
      .attr('cx', valArray[i])
      .attr('cy', valArray[i])
      .style('fill', function(d) {
        return ("#ccc");
      }).on('mouseover', function(d) {
        d.style("visibility", "visible")
      })
      .on('mouseout', function(d) {
        d.style("visibility", "hidden")
      })

  });
});

.hoverNode {
  visibility: hidden;
}

使用selectAll获取特定于组的svg元素

2 个答案: