d3.js: Необычная ошибка

Question

У меня есть эта диаграмма пончиков проекта d3.js. По какой-то причине я не могу получить доступ к данным в onmousemove. Значение i равно нулю - это все функции, которые я передаю в этом событии. Я хочу получить доступ к данным конкретного среза, куда движется мышь.

Как это разрешить? Кто-то pls hlp!

Вот мой код до сих пор:

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

Ваш piesvg.select привязан к нулевому индексу для i и, по всей вероятности, не определен для d, поскольку он принимает эти значения из одного элемента подсказки, а не из срезов. Трудно быть на 100% уверенным в фрагменте, но я подозреваю, что вы хотите получить доступ и использовать «данные» и «i» из исходного selectAll на срезах.

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

редактироваться пирог ломтиков хранения исходных данных в d.data собственности ^^^