взрывающийся кусок пирога при падении легенды в круговой диаграмме D3

Question

Я создал круговую диаграмму, используя D3.js вместе с легендами, чтобы соответствовать кусочкам пирога.

Я могу взорвать кусочек пирога на мысе и мыши.

Мне нужно взорвать кусочек пирога и показать подсказку инструмента со значением, соответствующим кусочку пирога, когда я навешиваю над легендой.

любые указатели для достижения этой цели.

Answer 1

Дайте каждому слою какой-нибудь текст. Дайте этому тексту идентификатор и установите видимость идентификатора текста на скрытый в CSS. При наведении курсора мыши (или когда вы хотите показать всплывающую подсказку) снимите скрытый класс, таким образом, показывая текст.

var slice = d3select(slice) 
.append("text") 
.attr("id", function(d,i) 
{ 
return "text" + i; 
} 
.classed("hidden", true); 

slice.on("mouseover" function(){ 
d3.select(this) 
.classed("hidden", false); 
} 

.hidden{ 
visibility:hidden; 
} 

Это не будет работать с тобой еще, очевидно, так как я бы не выбрал правильные элементы. Если вы предоставите JSFiddle тогда, возможно, я мог бы видеть, если я мог бы показать вам, что это работает :)

Answer 2

Это, как я достиг взорвавшейся среза пирога на зависший над легендой

1) при создании пирога кусок добавленной атрибут 'id' со значением, который будет соответствовать тому, что я показываю как легенда (метка) 2) В функции mouseOver по легенде я получаю идентификатор, используя var id = путь [id = '"+ this.textContent +"'] " 3) используя d3.select, используя путь, который мы получили на этапе 2 4) используйте выделение, чтобы выполнить вспенивание кусочка пирога.