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小提琴中添加外部文件，所以它不起作用....

这是缺少的.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

对于i，你的piesvg.select必然是零索引的，并且在所有概率中都是d未定义的，因为它从单个工具提示元素获取这些值，而不是切片。很难从代码片段中100％确定，但我怀疑您是否想要访问和使用“数据”＃39;和＆＃39;我＆＃39;来自切片上的原始selectAll。

"scripts": {
    "bundle": "webpack --config webpack.config.js",
    "prestart": "npm run bundle",
    "start": "node server.js"
  }

编辑为饼切片存储d.data属性中的原始数据^^^

d3.js：不寻常的错误

1 个答案: