D3更新DOM，但沒有任何顯示

Question

我正在構建一個強制定向圖，並且據我所知，我已經正確編寫了代碼。此代碼運行後，DOM看起來完全正確。然而，沒有顯示。

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()); 
*/ 

模擬部分被註釋掉，因爲我試圖讓第一部分工作。當我取消註釋時，即使處理顯然不完整，它也只會調用「剔」事件一次。 JavaScript控制檯中沒有任何內容可以解釋它。

查看http://jsfiddle.net/jarrowwx/gof5knaj/36/的完整代碼。

今天早上我做了些事情，發生了一些變化，現在我沒有做任何事情似的。我檢查了D3 github，最後一次提交看起來是在11天前，所以它不可能是由於對庫改變造成的。

有沒有人經歷過這樣的事情？任何指針我做錯了什麼？我發現了D3錯誤嗎？

Answer 1

問題出在我的功能createTypeNode。

我通過以下方式創建了圖像元素：document.createElement('image')。這是行不通的。要通過JavaScript創建圖像，必須使用命名空間。

參見：Programmatically creating an SVG image element with javascript