d3js SVG : 제목 툴팁

d3js의 SVG를 표시하지 않습니다 내가 동그라미를 많이 포함하는 그래프가, 지금은 각 원에 툴팁을 삽입 할 한 타이틀 툴팁d3js SVG : 제목 툴팁

를 표시하지 않고 그것은 작동하지 않습니다 어느 쪽도 원이나 도구 설명 상자 제목으로, 여기 내 실수

var circleSmall = canvas.append("circle") 
      .attr("cx", 869) 
      .attr("cy", 693) 
      .attr("r", 10) 
      .attr("fill", "green") 
.append("svg:title").text("Your tooltip info") 
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})

http://jsfiddle.net/WLYUY/57/

출처

2014-04-15 user2869931

가장 중요한 장애물이 마음의 구형했다 caannot. 서클에 추가 된 후 마우스 이벤트가 서클에 도달하지 못하도록 막았습니다. 그래서, 할 첫 번째 일은이다 :

/* do this or append circles AFTER appending recs */ 
rect { 
    pointer-events: none; 
}

나는/보여 툴팁을 숨기기 위해 필요한 mouseover 및 mouseout 이벤트를 추가했습니다.

완료 FIDDLE 여기에 있습니다.

참고 : 데모 용으로 오렌지색과 빨간색 테두리가있는 큰 주황색 이벤트를 수신하는 하나의 원을 그렸습니다 (그럴 수는 없습니다). 이것은 단지 예입니다 ... 일반적으로 모든 서클에 이벤트 리스너를 적용합니다. 이제는 수동으로 모양을 추가하고 있지만 D3의 주요 요점 중 하나 인 데이터 바인딩을 기반으로 할 것이라고 가정합니다.

출처

2014-04-16 00:31:56 FernOfTheAndes

답변 해 주셔서 감사합니다. 팁 주셔서 감사합니다. 또 하나의 질문으로 각 원에 다른 툴팁을 추가하고 싶다면 이것에 관해 나를 도와 줄 수 있습니까? – user2869931

@ user2869931 툴팁의 내용이 다른 경우,'.html' 애트리뷰트는 d3의 데이터 바인딩을 통해 써클과 관련된 일부 속성을 출력하도록 만들어야합니다.'.html (function (d) {return d. someCircleProperty;})'. 이 좋은 [튜토리얼] (https://www.dashingd3js.com/creating-svg-elements-based-on-data)을 확인하십시오. – FernOfTheAndes

d3js SVG : 제목 툴팁

답변

관련 문제