D3 updating DOM, but nothing is showing

Question

I am building a force-directed graph, and as far as I can tell, I have written the code correctly. The DOM looks exactly right after this code runs. And yet, nothing is displayed.

var type_node_list = typeNodes(data);
shuffle(type_node_list);
initializePosition(type_node_list);

var links = typeLinks(type_node_list);

var svg = d3.select('#root');

var link = svg
    .append('g')
    .attr('id', 'links')
    .selectAll('line')
    .data(links)
    .enter()
    .append('line')
    .attr('class', 'link');

var type_nodes = svg
    .append('g')
    .attr('id', 'nodes')
    .selectAll('.node')
    .data(type_node_list)
    .enter()
    .append(createTypeNode);

function updateTypeNodeLocations() {
    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;});

    type_nodes
        .attr('x', nodeX)
        .attr('y', nodeY);
}
updateTypeNodeLocations();
/*
var position_the_types = d3.forceSimulation()
  .nodes( type_node_list )
  .force("charge",d3.forceManyBody().strength(-10))
  ;
position_the_types.on('tick',updateTypeNodeLocations());
*/

The simulation portion is commented out because I'm trying to get the first part working. When I uncomment it, it only calls the 'tick' event once, even though the processing is clearly not complete. And there is nothing in the JavaScript console to explain it.

See http://jsfiddle.net/jarrowwx/gof5knaj/36/ for the full code.

I had things working this morning, and something changed and now nothing I do seems to work. I checked the D3 github, and the last commit appears to have been 11 days ago, so it's not likely caused by a change to the library.

Has anybody experienced something like this before? Any pointers on what I'm doing wrong? Have I uncovered a D3 bug?

When I run the fiddle I see lots of coloured circles with shapes in. Am I supposed to see something else? — Robert Longson, Nov 15 '16 at 22:14
When calling `position_the_types.on('tick',updateTypeNodeLocations());` you are actually passing the return value of the function `updateTypeNodeLocations` as a callback which is not what you want. You need to just pass the reference to the function instead of calling it: `position_the_types.on('tick',updateTypeNodeLocations);` without the inner parentheses. If this is it, it might even be worth considering deleting this question altogether. — altocumulus, Nov 15 '16 at 22:36
@altocumulus, You are right about the extraneous parens. DOH! Which solves the tick problem. But even after fixing that, I still see nothing. — John Arrowwood, Nov 16 '16 at 01:57
@RobertLongson: There should be a line of colored circles down the left, and then random colored circles all over the place. Do you see the random ones? — John Arrowwood, Nov 16 '16 at 01:59

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

The problem lie in my function createTypeNode.

I created the image element via: document.createElement('image'). That doesn't work. To create an image via JavaScript, one must use Namespaces.

See: Programmatically creating an SVG image element with javascript

edited May 23 '17 at 12:13

Community

1
1

answered Nov 16 '16 at 03:16

John Arrowwood

2,370
2
21
32

D3 updating DOM, but nothing is showing

1 Answers1