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

模拟部分被注释掉，因为我试图让第一部分工作。当我取消注释它时，它只调用'tick'事件一次，即使处理显然没有完成。 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

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

1 个答案: