D3 포스 지시 그래프를 사용하여 텍스트 대신 노드

Question

원본 : 자신의 예에서 http://mbostock.github.com/d3/ex/force.html

위의 링크에 규정 된 바와 같이, 나는 단순히 대신 자신의 이름으로 원 노드를 대체하기 위해 노력하고있어. 나는 D3 나 js/jquery에 대해 많이 알지 못한다. 그러나 나는 그것이 어떻게 작동하는지 파악하려고 노력하고있다.

노드를 svg : text로 바꿀 수는 있었지만 시작했을 때 노드가 시작될 때마다 "스폰"되어 애니메이션을 만들지 않습니다.

여기에 그룹을 사용해야하는지 잘 모르겠습니다. 내가한다면, 어떻게 가르쳐 줘.

지금까지이 내 수정 된 코드입니다 :

<div id="chart"> 
</div> 

<script type="text/javascript"> 
<!-- 

var w = 960, 
    h = 500, 
    fill = d3.scale.category20(); 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

d3.json("http://fourthdraft.com/ext/dataviz/miserables.json", function(json) { 
    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(70) 
     .nodes(json.nodes) 
     .links(json.links) 
     .size([w, h]) 
     .start(); 

    var link = vis.selectAll("line.link") 
     .data(json.links) 
    .enter().append("svg:line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }) 
     .attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    var node = vis.selectAll("circle.node") 
     .data(json.nodes) 
    .enter().append("svg:text") 
     .attr("class", "node") 
     .attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }) 
     .text(function(d) { return d.name; }) 
     .style("fill", function(d) { return fill(d.group); }) 
     .call(force.drag); 

    node.append("svg:title") 
     .text(function(d) { return d.name; }); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
    }); 
}); 

//--> 
</script> 

Answer 1

이 바이올린 참조 : http://jsfiddle.net/nrabinowitz/QMKm3/6/이

위의 코드의 주요 문제는 제대로 cx 및 cy 속성을 변경한다는 것입니다 (특정 svg:circle 요소)를 svg:text 요소를 추가 한 부분의 x 및 y으로 이동 시키지만 반복적 인 레이아웃 업데이트가 발생하는 곳인 tick 처리기에서 변경하지 않았습니다. NS : 또한 변경해야

force.on("tick", function() { 
    // snip 

    node.attr("x", function(d) { return d.x; }) 
     .attr("y", function(d) { return d.y; }); 
}); 

나는이의 맥락에서 어떤 차이를 만드는 생각하지 않는다하더라도

var node = vis.selectAll("text.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

에

var node = vis.selectAll("circle.node") 
    .data(json.nodes) 
.enter().append("svg:text") 

에서 선택 - 및 - 추가 이 코드는 결국 당신을 여행 할 것입니다 - D3에서 as explained here, 일반적으로 "선택기로 선택,이 선택기와 일치하는 누락 된 노드 추가,이 선택기와 일치하는 추가 노드 제거"패턴을 사용합니다. 코드에서 선택자와 추가하는 노드가 일치하지 않습니다. 이것은 작성된 코드에 아무런 영향을 미치지 않더라도 개념적인 문제입니다. (나는이 패턴이 여전히 혼란스럽고 이상하다는 것을 알아야한다. 그러나 적어도 다음은 다른 개발자들에게 코드를 읽기 쉽게 만든다.)