Question

但不确定我的问题发生了什么，并且很困难。

我正在建立一个包含许多布局的数据可视化。我目前正在尝试制作一个以中间为中心的文本的饼图，每当有人将鼠标悬停在圆弧上时，它会在中心显示文本。

function GUP_PieRender() {

var svg = d3.select(targetDOMelement).append("svg")
   .attr("width", width)
   .attr("height", height)
 .append("g")
   .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
  .data(pie(dataset))
.enter().append("g")
  .attr("class", "arc")
  .on("mouseover", function(d) { d3.select("text").text(d.data.ResearchArea)}); //Problem area

g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return color(d.data.ResearchArea); });

g.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle"); 
}

它正在做的是在另一个带有文本的D3条形图布局中显示文本。所以我必须过早地调用mouseover事件并将其附加到该文件中的最后一个文本元素？

我可以得到补救措施吗？

感谢。

Answer 1

这里的问题（在你的＆＃34; mouseover＆＃34;处理程序中）就是这样：

d3.select("text")

执行此操作时，D3会选择在该页面中找到的第一个文本元素。显然，你并不是那么想要的。

因此，只需：

g.select("text")

这样，您只需在g选择中选择文字元素。

或者，您也可以这样做：

d3.select(this).select("text")

由于此上下文中的this是组元素。

这是一个演示（我试图模仿你的代码）：

＆＃13;

var data = ["foo", "bar", "baz"];
data.forEach(function(d) {
  render(d);
})

function render(data) {
  var svg = d3.select("body")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);

  var g = svg.selectAll(null)
    .data([data])
    .enter()
    .append("g")
    .on("mouseover", function(d) {
      g.select("text").text(String)
    })
    .on("mouseout", function(d) {
      g.select("text").text(null)
    })

  g.append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 20);

  g.append("text")
    .attr("x", 25)
    .attr("y", 20);
}

＆＃13;

svg {
  background-color: tan;
  border: 1px solid darkgray;
  margin-right: 10px;
}

circle {
  fill: teal;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

D3.js鼠标悬停在圆环图中的文本

1 个答案: