d3의 배열에 요소 추가

JSON 파일의 데이터를 사용하여 d3 강제 레이아웃 그래프를 만드는 웹 페이지를 만들고 버튼을 누르면 사용자에게 이름과 새 노드를 입력하라는 메시지가 표시됩니다. 제공된 이름으로 생성됩니다. 페이지가 성공적으로로드되고 버튼을 누르면 경고가 이름을 묻습니다. 이름을 입력하면 'Uncaught TypeError : undefined is not function'이라는 오류가 발생하고 새 노드가 추가되지 않습니다.d3의 배열에 요소 추가

이 오류를 해결하려면 어떻게해야합니까? Chrome을 사용하여 newNode를 추가하려는 행에서 오류가 발생하고 있음을 알았습니다. 내 코드는 다음과 같습니다.

<button onclick="addNode()">Click to add Node</button> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script> 

function addNode() { 
    var nodeName = prompt("Name of new node:"); 
    var newGroup = Math.floor(Math.random() * 6); 
    if (nodeName != null) { 
    var newNode = {"node":{"name":nodeName,"group":newGroup}}; 
    force.nodes.append(newNode); 
    force.start(); 
    } 
} 

var width = 960, 
    height = 500; 

var color = d3.scale.category20(); 

var force = d3.layout.force() 
    .charge(-120) 
    .linkDistance(30) 
    .size([width, height]); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("user_interactions(1).json", function(error, graph) { 
    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
     .enter().append("line") 
     .attr("class", "link") 
     .style("stroke-width", function(d) { return Math.sqrt(d.value); }); 

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
     .enter().append("circle") 
     .attr("class", "node") 
     .attr("r", 5) 
     .style("fill", function(d) { return color(d.group); }) 
     .call(force.drag); 

    node.append("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>

출처

2014-06-10 user3727044

force.nodes은 노드 배열을 반환하는 함수입니다. 그것은 재산이 아닙니다. 따라서 force.nodes.append은 의미가 없습니다. 당신은 아마 내가 D3가 정상적으로 동적으로 노드 배열의 변화 처리 할 것을, 그러나 확실하지 않다

force.nodes(force.nodes().push(newNode));

, 데이터에 새 노드를 추가 할. 어떤 경우

어떻게 초기 속성 ( r, fill 등)

을 설정하는 유사한 방식으로 자신의 특성을 새로운 노드에 대한 SVG 요소를 추가하고 지정해야합니다

출처

2014-06-10 18:41:44

d3의 배열에 요소 추가

답변

관련 문제