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

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

新規登録して質問してみよう
ただいま回答率
85.51%
SVG

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

2642閲覧

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

arue

総合スコア43

SVG

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

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/12/19 05:43

下記参考サイトを参考に円グラフを描写することが出来ました。
しかし、同じページに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); // ウィンドウのリサイズイベントにハンドラを設定

描写結果

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

HTML

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

になっている所を

HTML

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

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

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

###案2

HTML

1<svg id="chart"></svg> 2<svg id="chart2"></svg> 3(途中省略) 4<script src="chart.js"></script> 5<script src="chart2.js"></script>

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

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

投稿2017/12/20 13:32

okrt

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arue

2017/12/21 06:37

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

0

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

投稿2017/12/21 01:21

arue

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問