Javascript, Jqeuryで　SVGタグに接近。

こんにちは！今D3.jsで簡単なグラフを作ってみていますが

SVGタグのattributeのValueが必要なのでJavascriptでSVGタグに接近したところ、

NULLがリターナブルされました。

もしかするとSVGタグに接近する時、特別なselectorがあるのですか？

ご意見待っています。

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>secessionCustomer</title> <style> .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; } </style> <script src="../d3-master/d3.min.js" language="JavaScript"></script> <script src="liquidFillGauge.js" language="JavaScript"></script> <script src="https://code.jquery.com/jquery-latest.js" language="JavaScript"></script> <script language="JavaScript">

var targetTagId = document.getElementById('fillgauge');
console.log(targetTagId);

  var config = liquidFillGaugeDefaultSettings();

  config.circleColor = "#FF7777";
  config.textColor = "#FF4848";
  config.waveTextColor = "#FF0000";
  config.waveColor = "#FFDDDD";
  config.circleThickness = 0.2;
  config.textVertPosition = 0.2;
  config.waveAnimateTime = 1000;

  var gauge= loadLiquidFillGauge("fillgauge", 25, config); 
  function NewValue(){
      if(Math.random() > .5){
          return Math.round(Math.random()*100);
      } else {
          return (Math.random()*100).toFixed(1);
      }
  }
  </script>
  </head>

tkanda

2016/05/05 05:59

HTMLとJavaScriptを追記できませんか？ Can you put the HTML and JavaScript code in your question, please?

退会済みユーザー

2016/05/05 06:11 編集

はい。ちょっと待ってください

行動規範の内容に同意します

回答2件

ベストアンサー

12行目から始まる <script> の中のコードが実行される時点で、<svg> タグがレンダリングされていない（DOM要素として存在していない）のが原因だと思います。
下記のようにすると <body> の中が全部読み込まれるまで、コードの実行を遅らせることができます。

The <svg> tag is not yet rendered when the <script> at line 12 is executed. You can wait until the <body> tag and everything inside will be rendered as below.

JavaScript
1$(function() {
2  var targetTagId = document.getElementById('fillgauge'); 
3  console.log(targetTagId);
4
5  var config = liquidFillGaugeDefaultSettings();
6
7  config.circleColor = "#FF7777"; 
8  config.textColor = "#FF4848"; 
9  config.waveTextColor = "#FF0000"; 
10  config.waveColor = "#FFDDDD"; 
11  config.circleThickness = 0.2; 
12  config.textVertPosition = 0.2; 
13  config.waveAnimateTime = 1000;
14  var gauge= loadLiquidFillGauge("fillgauge", 25, config);  
15  function NewValue(){ 
16      if(Math.random() > .5){ 
17          return Math.round(Math.random()*100); 
18      } else { 
19          return (Math.random()*100).toFixed(1); 
20      } 
21  } 
22});