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未定義

回答

相關問題