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

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>'; 
});

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

紧接着我调用这段代码：

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

其中returns值为32。'main-node-text'的实际高度为64像素。

如果我以 100 毫秒的超时调用相同的函数 - 那么它 returns 正确值为 32 像素。

问题：我如何确定元素的渲染已经完成并在之后执行我的代码？

编辑只要问题没有解决，请回答。我尝试将 64 像素的固定高度设置为 'main-node-text' 并且它有效，但是当高度为自动时，'p' 元素的高度会在一段时间后发生变化。

编辑 2 这是实时页面：HERE

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

Answer 1

d3.append 与任何其他 DOM 操作一样，是同步的。这意味着它会在 returns 后立即完成，因此您将在下一行看到 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 方法将完成执行时调用函数

Call function when d3 add method will finish execution

javascript

svg

d3.js