D3을 처음 사용하고 json 데이터가 동적 인 강제 그래프에 대해 작업하고 있습니다. 나는 새로운 데이터를 받으면 힘 그래프를 바꿀 수 있지만 그 효과는 돋보입니다. 내 힘 그래프를 생성하는 코드는 다음과 같습니다동적 json 데이터에서 강제 방향 그래프의 링크 업데이트
<div class="graph"></div>
<script>
var w = 660,
h = 700,
r = 10;
var vis = d3.select(".graph")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.attr("pointer-events", "all")
.append('svg:g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('svg:g');
vis.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('fill', 'rgba(1,1,1,0)');
function redraw() {
console.log("here", d3.event.translate, d3.event.scale);
vis.attr("transform", "translate(" + d3.event.translate + ")" +
" scale(" + d3.event.scale + ")");
};
var force = d3.layout.force()
.gravity(.05)
.charge(-200)
.linkDistance(260)
.size([w, h]);
var svg = d3.select(".text")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.json(graph, function(json) {
var nodeList = json.nodes;
var link = vis.selectAll("line")
.data(json.links)
.enter()
.append("line")
.attr("stroke-opacity", function(d) {
if(d.label == 'is a') {
return '0.8';
} else {
return '0.2';
};
})
.attr("stroke-width", function(d) {
if(d.value !== null) {
return d.value;
} else {
return 2;
};
})
.style("stroke", function(d) {
if(d.color !== null) {
return d.color;
};
})
.on("mouseover", function() {
d3.select(this)
.style("stroke", "#999999")
.attr("stroke-opacity", "1.0");
})
.on("mouseout", function() {
d3.select(this)
.style("stroke", function(d) {
if(d.color !== null) {
return d.color;
};
})
.attr("stroke-opacity", function(d) {
if(d.label == 'is a') {
return '0.8';
} else {
return '0.2';
};
})
});
link.append("title")
.text(function(d) { return d.label });
var node = vis.selectAll("g.node")
.data(json.nodes)
.enter()
.append("svg:g")
.attr("class","node")
.call(force.drag);
node.append("svg:circle")
.attr("r", function(d) {
if (d.size > 0) {
return 10+(d.size*2);
} else {
return 10;
}
})
.attr("id", function(d) { return "Node;"+d.id; })
.style("fill", function(d) {
if(d.style == 'filled') {
return d.color;
};
})
.style("stroke", function(d) {
if(d.style !== 'filled') {
return d.color;
};
})
.style("stroke-width", "2")
.on("mouseover", function() {
d3.select(this).style("fill", "#999");
fade(.1);
})
.on("mouseout", function(d) {
if (d.style == 'filled') {
d3.select(this).style("fill",d.color);fade(1);
} else {
d3.select(this).style("stroke",d.color);
d3.select(this).style("fill","black");
}
fade(1);
});
node.append("title")
.text(function(d) { return d.Location; });
force.nodes(json.nodes)
.links(json.links)
.on("tick", tick)
.alpha(1)
.start();
function tick() {
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
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; });
}
});
</script>
나는 새로운 JSON 문자열을 다시 전체 기능을 불러 수신 새로운 그래프를 만들 수 있어요. 이것은 오래된 그래프 대신에 새로운 그래프를 만듭니다. 값이 수신되면 이전 그래프를 새 값 세트로 업데이트 할 수 없습니다. 내 그래프의 노드는 변경되지 않고 노드 간의 관계 만 변경됩니다.
새로운 노드가 삭제되고 다시 생성되는 예제 (http://bl.ocks.org/1095795)에 실 렸지만 구현이 약간 다릅니다.
모든 포인터 또는 도움은 정말 감사하겠습니다.
@Rahul은 기본적으로 당신은 전체 그래프를 다시 그리는거야? – Pramod
이 답변을 이해할 수 없습니다. 누구든지 그것을 이해할 수 있도록 도와 줄 수 있습니다. 그래서 그것을 사용할 수 있습니다. –
단지 몇 가지 관찰 결과, svg를 포함해야하는 요소는 Graph 생성자의 매개 변수이지만 하드 코딩 된 값이 대신 사용됩니다. 또한 함수 이름 지정은 removeallLinks와 같이 일관되게 camelCased가 아닙니다. – glasspill