I'm looking at this other question and this example provided in that question, and I cannot quite get my own update function to work:
update = function() {
path = svg.append("svg:g").selectAll("path")
.data(force.links());
path.enter().append("svg:path")
.attr("class", "link")
.attr("fill", "none")
.attr("stroke", "#666")
.attr("stroke-width",
function(d) {
return (Math.floor(Math.log(d.value - min_val) / Math.log(2)) + 1) + "px"
})
.attr("marker-end", "url(#generic_arrow_marker)")
.on("mouseover",
function(d, i) {
if(d3.select(this).attr("stroke") != "#666") {
mousedOut = false;
}
})
.on("mouseout",
function(d, i) {
if(d3.select(this).attr("stroke") != "#666") {
mousedOut = true;
restoreGraph();
}
});
path.exit().remove();
circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes());
circle.enter().append("svg:circle")
.attr("r",
function(d) {
return (20 + Math.floor(Math.log(d.pagerank) / Math.log(2)) * 2) + "px"
})
.attr("fill", "#ccc")
.attr("stroke", "#333")
.attr("stroke-width", "1.5px")
.on("mouseover", // select relevant data nodes on click
function(d, i) {
mousedOut = false;
d3.select(this).attr("class", "selected");
transitions(d);
$("span#user").text(d.name)
$("span#pagerank").text(d.pagerank)
})
.on("click",
function(d, i) {
incoming = !incoming;
transitions(d);
})
.on("mouseout",
function(d, i) {
mousedOut = true;
d3.select(this).attr("class", "");
restoreGraph();
})
.call(force.drag);
circle.exit().remove();
text = svg.append("svg:g").selectAll("g")
.data(force.nodes());
textEnter = text.enter().append("svg:g");
textEnter.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.attr("class", "shadow")
.text(function(d) { return d.name; })
textEnter.append("svg:text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; })
text.exit().remove();
force.start();
}
Whenever I call update(), it creates an entirely new copy of the existing D3 graph, even if I didn't change anything.
Ideas on what I might be doing wrong?
