0

我正在构建一个力导向图，据我所知，我已经正确编写了代码。这段代码运行后，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 错误吗？

4

1 回答 1

0

问题出在我的功能createTypeNode上。

我通过以下方式创建了图像元素：document.createElement('image')。那是行不通的。要通过 JavaScript 创建图像，必须使用命名空间。

请参阅：使用 javascript 以编程方式创建 SVG 图像元素

于 2016-11-16T03:16:28.753 回答