d3选择的ID未定义

通过ID选择元素后，我发现ID未定义。d3选择的ID未定义

为了说明这一点，我放在一起this example (fiddle link)

设置元素：

<pre id='output'></pre> 
<input id='my-checkbox' type='checkbox'>

D3的脚本：

d3.select('#my-checkbox') 
    .call(function(){ 
     document.getElementById('output').outerHTML = this.id; 
    }) 
    .on('click', function(){ 
     document.getElementById('output').outerHTML = this.id; 
    });

这填补了pre元素与 “不确定”，这仍然存在，即使点击框。另一方面下面的脚本正如我所料：

d3.select('#my-checkbox') 
    .on('click', function(){ 
     document.getElementById('output').outerHTML = this.id; 
    });

这是怎么回事？我如何在d3的call函数中访问元素ID？

来源

2017-04-24 AlexG

是在页面的底部，你的JavaScript代码？ – gaheinrichs

看看我链接到的小提琴。 JS是在我的元素被定义之后。 – AlexG

您将得到元素对象作为第一个参数：

d3.select('#my-checkbox').call(function(s){ 
    document.getElementById('output').outerHTML = s.attr('id'); 
});

来源

2017-04-24 22:25:46 gaheinrichs

非常好，谢谢。你知道为什么'this'这个函数在'this.id'不工作时调用'？ – AlexG

我不知道为什么d3在这种情况下将元素作为参数传递。我知道有点混乱，因为'on'会将元素作为上下文来传递。这种情况下的情况可能是另外一种情况？ – gaheinrichs

从D3文档

像function.call，调用每个注册的回调指定类型，传递回调指定参数，并将其作为此上下文。有关更多信息，请参阅dispatch.apply。

你正在寻找的功能是each

.each(function(){ 
    document.getElementById('output').outerHTML = this.id; 
})

来源

2017-04-24 22:38:54

d3选择的ID未定义

回答

相关问题