javascript - d3.js:异常错误

Question

我有这个 d3.js 项目圆环图。出于某种原因，我无法访问 onmousemove 中的数据。 i 值变为零是我在该事件中传递的所有函数。我想访问鼠标移动过的特定切片的数据。

我该如何解决这个问题？有人请帮助!

到目前为止，这是我的代码:

piesvg.selectAll("path")
.data(pie(data))
  .enter().append("g")
.attr('class', 'slice')

 var slice = d3.selectAll('g.slice')
  .append('path')
  .each(function(d) {
    d.outerRadius = outerRadius - 20;
  })
  .attr("d", arc)
  .attr('fill', function(d, i) {
    return colorspie(i)
  })
  .on("mouseover", arcTween(outerRadius, 0))
  .on("mouseout", arcTween(outerRadius - 20, 150)) 
  .on("mousemove", function(data){
    piesvg.select(".text-tooltip")
     .attr("fill", function(d,i){return colorspie(i)})
     .text(function(d, i){return d[i].domain + ":" + parseInt(d[i].value * 20)}); //Considers i as 0, so no matter whichever slice the mouse is on, the data of only first one is shown
  });

完整代码如下:

https://jsfiddle.net/QuikProBro/xveyLfyd/1/

我不知道如何在 js fiddle 中添加外部文件，所以它不起作用....

这是缺少的 .tsv:

value   domain
1.3038675   Cloud
2.2541437   Networking
0.15469614  Security
0.8287293   Storage
0.7292818   Analytics
0.61878455  Intelligence
1.7016574   Infra
0.4088398   Platform

Answer 1

您的 piesvg.select 对于 i 必然是零索引的，对于 d 很可能是未定义的，因为它从单个工具提示元素而不是切片中获取这些值。很难从代码片段中 100% 确定，但我怀疑您想要访问和使用切片上原始 selectAll 中的“数据”和“i”。

.on("mousemove", function(d, i){
    piesvg.select(".text-tooltip")
     .attr("fill", colorspie(i))
     .text(d.data.domain + ":" + parseInt(d.data.value * 20));   
});

编辑为饼图切片将原始数据存入d.data属性^^^