d3.js 개체의 하이퍼 링크

저는 d3.js 또는 java의 초보자입니다. 들여 쓰기 된 트리 예제를 http://bl.ocks.org/1093025에서 사용하고 있습니다. 내 로컬 컴퓨터에서이 작업을 수행하는 데 2 시간이 걸리므로 내 기술 수준에 대한 아이디어를 얻을 수 있습니다.d3.js 개체의 하이퍼 링크

나는 flare.json 파일을 열었고 그 파일을 망치기 시작하여 성공적으로 조작 할 수있었습니다. 이 모양은 다음과 같습니다.

{ 
    "name": "Test D3", 
    "children": [ 
     { 
      "name": "News", 
      "children": [ 
       { 
        "name": "CNN", 
        "size": 1000 
       }, 
       { 
        "name": "BBC", 
        "size": 3812 
       } 
      ] 
     }, 
     { 
      "name": "Blogs", 
      "children": [ 
       { 
        "name": "Engaget", 
        "size": 3938 
       } 
      ] 
     }, 
     { 
      "name": "Search", 
      "children": [ 
       { 
        "name": "Google", 
        "size": 3938 
       }, 
       { 
        "name": "Bing", 
        "size": 3938 
       } 
      ] 
     } 
    ] 
}

지금하고 싶은 것은 하이퍼 링크를 추가하는 것입니다. 예를 들어, "CNN"을 클릭하고 CNN.com으로 이동할 수 있기를 원합니다. flare.json을 수정할 수 있습니까?

출처

2012-10-27 Mr. Fegur

"key": "value"쌍을 추가하는 것이 매우 쉽습니다. 예 :

물론

 "children": [ 
      { 
       "name": "Google", 
       "size": 3938, 
       "url": "https://www.google.com" 

      }, 
      { 
       "name": "Bing", 
       "size": 3938, 
       "url": "http://www.bing.com" 

      } 
     ]

, 당신의 D3 코드는 다음 append<svg:a> 태그에 필요하고 자신의 xlink:href 속성을 설정합니다.

여기에 도움이 될만한 html 및 d3 코드가 있습니다. 먼저 HTML 파일에 인 XLink 네임 스페이스를 가져와야 :

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 
... 
</html>

그런 다음 각 데이터 요소에 대한 노드를 추가 D3의 드로잉 코드에서 당신은 당신이 svg:a 태그를 클릭 가능한 링크로 할 요소를 포장 :

nodeEnter.append("svg:a") 
    .attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property 
.append("svg:rect") 
    .attr("y", -barHeight/2) 
    .attr("height", barHeight) 
    .attr("width", barWidth) 
    .style("fill", color) 
    .on("click", click); // <- remove this if you like

SVG 링크의 기본 동작을 방해 할 수 있으므로 .on ("클릭", 클릭)을 삭제하여 클릭 핸들러 (원래 예제에 있음)를 제거 할 수 있습니다.

rect을 클릭하면 적절한 url으로 연결됩니다. SVG 링크가 모든 브라우저에서 완전히 구현되지 않았을 수 있습니다.

click 처리기를 수정하여 d.url에서 URL을 읽고 해당 URL을 자바 스크립트를 통해 해당 URL로 수동으로 리디렉션 할 수 있습니다 (window.location = d.url;). 그렇다면 svg:a 태그와 xlink 코드가 필요하지 않습니다. 실제 링크를 추가하면 (스크립트가 아닌) 사용자/브라우저가 수행 할 작업을 결정할 수있는 이점이 있습니다 (예 : 새 탭/페이지에서 열림). 또한 일부 사용자가 JavaScript를 사용할 수없는 경우에도 도움이됩니다.

출처

2012-10-28 13:27:45 Juve

고마워요. 나는 당신의 대답으로 그 문제를 해결할 수있었습니다. –

** ** SVG 링크 **를 지원하는 ** 브라우저는 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29 – rmoestl

에서 볼 수 있습니다. 적어도 Chrome에서는 D3.js v3에서 네임 스페이스를 선언 할 필요가 있다면'.append ('svg : a') 대신'.append ('a')'를 쓸 수 있습니다. 그러나'xlink : href'라고 써야합니다. 여전히 DOM에 네임 스페이스가 필요하다면, [this hack] (https://groups.google.com/forum/#!msg/d3-js/Sh4ysLFBMRQ/hHjzBP0bX1oJ)을 사용하여 DOM의 네임 스페이스를 유지해야합니다. D3.js로 삽입하면 사라집니다. – mb21

d3.js 개체의 하이퍼 링크

답변

관련 문제