Question

我有一些包含2个属性的数据：颜色和值

我使用D3输入选择来创建圆形元素，并将它们附加到页面主体。它们的填充颜色由＆＃34;颜色＆＃34;属性。

然后，我将文本元素附加到页面。文本内容由＆＃34;值＆＃34;属性。

以下是我的工作内容：

// Set up svg element
var svg = d3.select("body")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300)
    .style("background", "lightblue");

var dataset = [
    {"colour":"red", "value":"First set of text"},
    {"colour":"green", "value":"Second attempt"},
    {"colour":"blue", "value":"Third and final!"}
];

// Create circles from the data
// On mouseover, give them a border (remove on mouseout)
svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("r", 40)
    .attr("cy", function(d, i) { return i*80 + 40; })
    .attr("cx", 50)
    .style("fill", function(d) {return d.colour;})

  // HERE
  // Can I somehow show and hide the text component that is
  // associated with this circle when the circle is hovered, rather
  // than the text itself?
  .on("mouseover", function(d) {
          d3.select(this).style("stroke", "black")
                         .style("stroke-width", 2)
  })
  .on("mouseout", function(d) {d3.select(this).style("stroke", "none")});

// Now add the text for each circle
// Same thing with mouseover and mouseout
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("y", function(d, i) { return i*80 + 40; })
    .attr("x", 50)
    .style("opacity", 0)
    .on("mouseover", function(d) {d3.select(this).style("opacity", 1)})
    .on("mouseout", function(d) {d3.select(this).style("opacity", 0)})
    .text(function(d) { return d.value;});

我希望隐藏文字，直到关联的圈子悬停在上面。如何将文本元素与特定的圆圈连接起来，以便我可以通过将鼠标悬停在圆圈上来切换是否显示文本？

下面这个小提琴是我要做的事情的概述，以及到目前为止我所做的事情。我只有在悬停时才会显示文字，但不会在圆圈悬停时显示。

https://jsfiddle.net/aj4zpn6z/

Answer 1

有几种方法可以实现这一目标。由于圆圈和文本都使用相同的数据集，因此我的解决方案使用filter。

首先，让我们为文本和圆圈命名变量：

var circles = svg.selectAll("circle")
    //etc...

var texts = svg.selectAll("text")
    //etc...

然后，在圈子mouseover功能中，我们会过滤具有相同colour属性的文字：

.on("mouseover", function(d){
    d3.select(this).style("stroke", "black").style("stroke-width", 2);
    var tempTexts = texts.filter(function(e){
        return e.colour === d.colour
    });
    tempTexts.style("opacity", 1);
});

这是您的更新小提琴：https://jsfiddle.net/wxh95e9u/

D3 - 如何在悬停从同一数据条目的不同属性创建的圆形元素时显示/隐藏文本元素？

1 个答案: