계층 데이터를 사용하여 샘플 d3 시각화를 구축했는데 이는 매우 잘 작동합니다. 사용자가 노드를 가로 질러 마우스를 이동할 때 해당 아이콘 / 노드에 바인딩 된 데이터를 표시해야합니다. 저도 그렇게했습니다. 잘 작동합니다.
툴팁의 노드에 따라 데이터를 표시해야합니다. 동일한 HTML 요소를 바인딩하고 싶지 않습니다.
내 코드는 다음과 같습니다.
HTML :
<div id="chart"></div>
JS :
node = vis.selectAll(".node");
node = node.data(force.nodes());
node.exit().remove();
node.enter().append("g")
.attr("class", "node")
.on("click", click).on("mouseover", function(){return tooltip.style("visibility", "visible")
tooltip.text
;})
.on("mousemove", function(){return tooltip.style("top",
(d3.event.pageY - 130)+"px").style("left",(d3.event.pageX - 130 )+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
툴팁에 클래스를 추가하려면 다음을 수행하십시오.
var tooltip = d3.select("#chart")
.append("div")
.attr("class", "my-tooltip")//add the tooltip class
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
tooltip.append("div")
.attr("id", "tt-name")
.text("simple");
tooltip.append("div")
.attr("id", "tt-size")
.text("simple");
마우스 오버시 값과 크기를 추가하려면 다음을 수행하십시오.
tooltip.select("#tt-name").text(d.name)
tooltip.select("#tt-size").text(d.size)
업데이트 된 코드는 다음과 같습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다