D3.js 공부 중입니다.
D3.js를 사용하여 멋진 상관도를 쓰고 싶다고 생각해 여러가지 시행착오하고 있습니다.
시행착오의 원래는 D3js. 오 rg 의 Examples 안에 있었다 이 입니다.
(언제든지 v4 시스템으로 업데이트되었습니다)



JOSN 파일을 보는지 ●에 커서를 맞추면 알 수 있습니다만, 레·미제라블의 인물 상관도입니다. 이것.

기본 이야기

상관도와 같은 그래프의 경우 위 이미지의 ●를 노드로, 그려진 선을 링크라고합니다.
그리고 기본적으로 브라우저는 Chrome 권장입니다.

D3.js로 썼는데, 실제로 svg는 어떨까 하고 있을 것이라고 생각했을 때는 svg 영역 위 오른쪽 클릭에서 열 수 있는 Chrome의 검증 화면에서 확인합시다.



데이터를 표시하려고 하면 [object Object]라고 나오게 된 시간이 있습니다. 그 때는 다음의 커멘드를 꽂아, 데이터의 내용을 콘솔에 표시시킵니다. (d는 적절히 변경해···)

hoge.js

console.log(JSON.stringify(d));

준비

먼저 위의 시행착오원에 있는 소스와 JSON 파일을 DL하여 웹 서버로 설정합시다. 404가 나올 때는 IIS에서 IMMA에 JSON 파일을 등록하면 OK. IIS가 아니면 구구하십시오.

위의 JSON 파일에서 모든 노드가 어떤 링크에 연결되어 있기 때문에 테스트를 위해 링크에 연결되지 않은 것을 "노드"와 "링크"사이에 (80 줄당) 추가하십시오. 합니다.

miserables.json

    {"id": "Brujon", "group": 4},
    {"id": "Mme.Hucheloup", "group": 8},
    {"id": "You", "group": 11},         ←追加
    {"id": "Reader1", "group": 12},     ←追加
    {"id": "Reader2", "group": 12}      ←追加
  ],
  "links": [
    {"source": "Reader1", "target": "Reader2", "value": 2},  ←追加
    {"source": "Reader2", "target": "Reader1", "value": 2},  ←追加
    {"source": "Napoleon", "target": "Myriel", "value": 1},

이제 node 단체의 "You"와 독립된 link를 가지는 "Reader1""Reader2"가 추가됩니다.

다음으로, 표시 영역이 좁고 이해하기 어려우므로 html 파일의 svg 영역을 넓게 하여 색을 칠합니다.

hoge.html

<svg width="1024" height="768" style="background-color:#ddd"></svg>

다음으로, 이 예에서는 node와 link의 설정은 개별적으로 설정하고 싶으므로, "style"태그 마다 지워 버립니다.
이제 일단 준비가 되었습니다.

Zoom 및 Pan 구현

실제로 표시해 보면 알겠지만, 위에서 추가한 link를 가지지 않는 node"You"나, 독립하고 있는 "Reader1""Reader1"이 표시 영역 밖으로 날아갑니다(웃음). 우선, 이 녀석을 찾아갈 수 있도록 합니다.

자세한 설명은 GitHub에서 README를 보는 것이 좋습니다.
htps : // 기주 b. 코 m / d3 / d3 - 오 m

Zoom과 Pan을 구현하려면 svg를 사용하는 방법과 HTML5의 Canvas를 사용하는 방법이 있지만 여기에서는 svg를 사용하는 방법을 중심으로 설명합니다.
canvas를 이용하는 방법에서는 canvas의 이벤트로서 D3.zoom을 호출하는 것 같습니다만, svg를 이용하는 방법에서는, 투명한 구형을 만들어, 그 구형의 이벤트로서 D3.zoom를 호출해 구현하는 것 같습니다.
svg의 샘플
캔버스 샘플

그럼 구현해 갑니다.

Zoom 이벤트 추가

먼저 Zoom 이벤트를 추가합니다.

hoge.html

 d3.json("miserables.json", function(error, graph) {
  if (error) throw error;

//"svg"にZoomイベントを設定
svg.call(d3.zoom()
    .scaleExtent([1/4,4])
    .on('zoom', SVGzoomed));

//"svg"上に"g"をappendしてdragイベントを設定
var g = svg.append("g")
    .call(d3.drag()
    .on('drag',SVGdragged))

function SVGzoomed() {
  g.attr("transform", d3.event.transform);
}

function SVGdragged(d) {
    d3.select(this).attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
      };

노드 및 링크 그룹 변경

그리고 node와 link를 투명한 구형이 있는 그룹 "g"에 넣어 버린다.

hoge.html

  var link = g.append("g")       //svg⇒gに
      .attr("class", "links")
    .selectAll("line")

hoge.html

  var node = g.append("g")       //svg⇒gに
      .attr("class", "nodes")
    .selectAll("circle")

Link를 드래그하면 왠지 크롬의 검증 화면에서 에러가 나오고 있으므로, 어떻게든 하고 싶다.
그리고, 먼저 <style>을 삭제하고 있으므로, 윤곽선의 색 지정을 추가해 둡니다.



hoge.html

  var link = g.append("g")  //svg⇒gに
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke","#999")  //輪郭線の色指定追加
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
      .call(d3.drag()　              //無いとエラーになる。。
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended));

"link"에 d3.drag 이벤트를 설정하면 뭔가 잘 작동했습니다.
! ! 여기는 나중에 제대로 조사하자! !

이제 Zoom과 Pan을 구현할 수 있었습니다. 이미지는 이쪽.


왼쪽 하단의 점이 node "You"입니다. 아주 멀리 날아가고 있습니다.

[scaleExtent]에서 Zoom의 최대, 최소를 지정할 수 있으므로 좋은 느낌으로 조정합시다.

우선 여기까지.