Question

我在组元素中有一个圆圈和文字。

var textInMainNode = mainNodeGroup
    .selectAll('foreignObject')
    .data(mainNodeObject)
    .enter()
    .append('foreignObject')
    .attr('width', function(d) { return d.radius * 2;})
    .attr('height', function(d) {return d.radius * 2;})
    .append('xhtml:div')
    .attr('id', 'main-node-text-wrap')
    .html(function (d) { return '<p id="main-node-text">'+d.label+'</p>'; 
});

这是将文本元素（foreignObject中的html）添加到圆圈的代码。

在此之后我调用此代码：

console.log($('#main-node-text').height());

返回32的值。＆＃39;主节点文本＆＃39;的真实高度。是64像素。

如果我使用100毫秒的超时调用相同的函数 - 那么它将返回32像素的正确值。

问题：我怎样才能确定元素的渲染完成并在此之后执行我的代码？

编辑只要问题没有解决，请回答。我试图将64 px的固定高度放到＆＃39;主节点文本＆＃39;并且它可以工作，但是当高度是自动时，那么＆＃39; p＆＃39;元素在一段时间后会发生变化。

编辑2 这是实时网页：HERE

答案在正确答案下方的评论中

Answer 1

与任何其他DOM操作一样，

d3.append是同步的。这意味着它会在返回后立即完成，因此您可以在下一行使用height，而不会延迟。您可能在代码中的其他位置出现错误，因为基于您的代码的以下代码段有效：

var mainNodeObject = [{radius: 10, label: "Hello"}];
var textInMainNode = d3.select('body')
    .append('svg')
    .selectAll('foreignObject')
    .data(mainNodeObject)
    .enter()
    .append('foreignObject')
    .attr('width', function(d) { return d.radius * 2;})
    .attr('height', function(d) {return d.radius * 2;})
    .append('xhtml:div')
    .attr('id', 'main-node-text-wrap')
    .html(function (d) { return '<p id="main-node-text">'+d.label+'</p>'; 
});

alert($('#main-node-text').height());

#main-node-text {
  width: 50px;
  height: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我要小心设置id属性。根据定义，它应该最多出现每页一次。由于您为mainNodeObject数组的每个元素分配它，它可能会多次出现。这可能会导致CSS和jQuery中的选择器匹配问题。尝试使用class属性和.选择器（例如.attr('class', 'main-node-text')和.main-node-text选择器）。

同时检查您是否未运行任何transition，或者如果您没有更改DOM以响应AJAX请求。

当d3 add方法完成执行时调用函数

1 个答案: