I find myself in a challenging situation once again - there may come a day when I am the one offering help, but for now, I admit that I am feeling quite lost. I am very new to d3.js and my understanding of JavaScript is still quite basic.
My current project involves creating an interactive visualization of characters and their relationships. The idea is to begin with one character (the user who is logged in) and display their connections initially. When the user clicks on a node, the magic should unfold, revealing the relations of the clicked node... and so forth. (Eventually, the user should also have the ability to hide nodes again, but let's take it one step at a time!)
I have uploaded the code and my json files to GitHub, where you can access them: https://github.com/katjalennartz/ba (index2.html should show everything; the JS code is in noForce2.js).
I suspect that the issue causing no circle to be displayed lies within my groups, and that I may have made mistakes there. I'm unsure how to properly bind my data so that the nodes can be dragged (and the links and text will follow the nodes...)
This is the part that I believe is not functioning correctly:
.selectAll("circles") // was null before try to use an update function -> null for save index 0 from missing when append circles. but null now is not working
.data(rootNodes)
//Exit (remove old elements)
circleGroup.exit().remove;
//Enter data
circleGroup.enter()
.append('g')
.attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')'; //work not nested data
})
.call(d3.drag() //need the drag so you can play with the nodes - links should follow - try to group it for show text beside circle
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
//add the circle
circleGroup.append("circle")
.attr("r", function (d) {
//increase radius if current user
if (d.id === thisuser) {
return radius * 2
} else { return radius; }
})
.attr("class", "chara")
.attr("fill", function (d) {
//set color to red if current user
return (d.id === thisuser) ? "red" : "blue"
})
.style("stroke", "#ffffff")
.on("click", update); //this should call the update
//set text to circle (username)
circleGroup.append("text")
.text(function (d, i) { return d.username; })
//.style('text-anchor', 'top')
.attr("x", radius)
.attr("y", 4);
If anyone here could assist me in untangling this mess, I would be immensely grateful.