D3更新DOM，但未显示任何内容

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?

Answer 1

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