d3.select（#elementId）が要素を見つけられません

Question

私はjavascriptで多くの経験がありません。

これは私のjsのコードです：

function() { 


      alert("start"); 
      var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 

      svg1.setAttributeNS(null,"id","fillgauge1"); 
      svg1.setAttributeNS(null,"width","97%"); 
      svg1.setAttributeNS(null,"height","250"); 
      svg1.setAttributeNS(null,"onclick","gauge1.update(NewValue());"); 
      document.body.appendChild(svg1); 
      var gauge1 = loadLiquidFillGauge("fillgauge1", 55); 
//other code 
    } 

function loadLiquidFillGauge(elementId, value, config) { 
    alert("start loadLiquidFillGauge OK"); 
    if(config == null) config = liquidFillGaugeDefaultSettings(); 
    alert(elementId + "<-elementID| value->" + value + "| config--> " + config); 
    var gauge = d3.select("#" + elementId); 

    //other code 
} 

コードがd3.selectコールで彼の実行を停止します。

elementid fillgauge1なぜそれがselectメソッドで見つからないのか、いくつか考えていますか？私は、コード、ID fillgauge1イマイチヌルとなりまし要素svg1を更新

EDIT

。 selectメソッドはまだ実行を停止します。

Answer 1

ドキュメントにSVG要素を追加する必要があります。あなたのSVGは作成されますが、ページには存在しませんので、d3.selectは機能しません。 loadLiquidFillGaugeを呼び出す前に下の行を追加してください。

document.body.appendChild(svg1) 

これは、より明確にすることがあります。

var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
svg1.setAttributeNS("http://www.w3.org/2000/svg","id","fillgauge1"); 
svg1.setAttributeNS("http://www.w3.org/2000/svg","width","97%"); 
svg1.setAttributeNS("http://www.w3.org/2000/svg","height","250"); 
svg1.setAttributeNS("http://www.w3.org/2000/svg","onclick","gauge1.update(NewValue());"); 

document.body.appendChild(svg1); 

var gauge1 = loadLiquidFillGauge("fillgauge1", 55);