質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.81%

  • JavaScript

    14332questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6013questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • SVG

    80questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

SVGの円グラフを同じページに二つ表示出来ない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 253

arue

score 11

下記参考サイトを参考に円グラフを描写することが出来ました。
しかし、同じページに2つ並べた際に2つめが表示されません。

id等を変更しても変わりませんでした。
解決方法がありましたら、是非よろしくお願いいたしますm(__)m

【参考サイト】
d3.jsでレスポンシブな円グラフを描く
http://webdesign-dackel.com/2015/03/26/d3js-responsive-pie-chart/

【HTML】

<svg id="chart"></svg>

【JS】

// サイズを設定
// ウィンドウサイズによって可変する
var size = {
  width : 600,
  height: 600
};

// 円グラフの表示データ
var data = [
  {value:15, color:"#e4f0fc"},
  {value:15, color:"#66b7ec"},
  {value:35, color:"#f7f39c"},
  {value:35, color:"#b1d7e4"},
];

// d3用の変数
var win   = d3.select(window), //←リサイズイベントの設定に使用します
    svg   = d3.select("#chart"),
    pie   = d3.layout.pie().sort(null).value(function(d){ return d.value; }),
    arc   = d3.svg.arc().innerRadius(40);

// アニメーション終了の判定フラグ
var isAnimated = false;


// グラフの描画
// 描画処理に徹して、サイズに関する情報はupdate()内で調整する。
function render(){

  // グループの作成
  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
      .attr("class", "arc");

  // 円弧の作成
  g.append("path")
    .attr("stroke", "white")
    .attr("fill", function(d){ return d.data.color; });

  // データの表示
  var maxValue = d3.max(data,function(d){ return d.value; });

  g.append("text")
    .attr("dy", ".35em")
    .attr("font-size", function(d){ return d.value / maxValue * 20; }) //最大のサイズを20に
    .style("text-anchor", "middle")
    .text(function(d){ return d.data.legend; });
}


// グラフのサイズを更新
function update(){

  // 自身のサイズを取得する
  size.width = parseInt(svg.style("width"));
  size.height = parseInt(svg.style("height")); //←取得はしていますが、使用していません...

  // 円グラフの外径を更新
  arc.outerRadius(size.width / 2);

  // 取得したサイズを元に拡大・縮小させる
  svg
    .attr("width", size.width)
    .attr("height", size.width);

  // それぞれのグループの位置を調整
  var g = svg.selectAll(".arc")
    .attr("transform", "translate(" + (size.width / 2) + "," + (size.width / 2) + ")");

  // パスのサイズを調整
  // アニメーションが終了していない場合はサイズを設定しないように
  if( isAnimated ){
    g.selectAll("path").attr("d", arc);
  }

  // テキストの位置を再調整
  g.selectAll("text").attr("transform", function(d){ return "translate(" + arc.centroid(d) + ")"; });
}


// グラフのアニメーション設定
function animate(){
  var g = svg.selectAll(".arc"),
      length = data.length,
      i = 0;

  g.selectAll("path")
    .transition()
    .ease("cubic-out")
    .delay(500)
    .duration(1000)
    .attrTween("d", function(d){
      var interpolate = d3.interpolate(
        {startAngle: 0, endAngle: 0},
        {startAngle: d.startAngle, endAngle: d.endAngle}
      );
      return function(t){
        return arc(interpolate(t));
      };
    })
    .each("end", function(transition, callback){
      i++;
      isAnimated = i === length; //最後の要素の時だけtrue
    });
}


// 初期化
render();
update();
animate();
win.on("resize", update); // ウィンドウのリサイズイベントにハンドラを設定


描写結果

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

>しかし、同じページに2つ並べた際に2つめが表示されません。
「2つ並べた」というのは、例えばHTMLが

<svg id="chart"></svg>
(途中省略)
<script src="chart.js"></script>


になっている所を

<svg id="chart"></svg>
<svg id="chart2"></svg>
(途中省略)
<script src="chart.js"></script>


に変更した、ということでしょうか。
それだけでは、id="chart2"に対してJavaScriptが何もしてないので、2つ目は表示されません。

案1

chart.jsの中でid="chart"部分とid="chart2"部分の両方を操作する。

案2

<svg id="chart"></svg>
<svg id="chart2"></svg>
(途中省略)
<script src="chart.js"></script>
<script src="chart2.js"></script>


に変更して、さらに
chart.jsの中でid="chart"部分を操作して、chart2.jsの中でid="chart2"部分を操作する。

どちらにせよ、元のファイルは1つの円グラフだけを扱う前提になっているでしょうから、2つ操作しようとすると多数の場所を書き換えないといけないかもしれません。
JavaScriptおよびd3.jsに関する知識が無い場合は、調査が必要だと思われます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/21 15:37

    okrtさんの案2のように読み込み先を別にし、js内のIDを変更したところ問題なく表示されました。
    ご回答ありがとうございました!

    キャンセル

0

okrtさんの案2のように読み込み先を別にし、js内のIDを変更したところ問題なく表示されました。
ご回答ありがとうございました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14332questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6013questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • SVG

    80questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。