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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

2279閲覧

D3で作成した2つのグラフがブラウザ上にて重ねて表示される

jam912sh

総合スコア25

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/10/18 02:47

編集2022/01/12 10:55

前提・実現したいこと

D3にて棒グラフ、円グラフをブラウザ上に並べて表示させたいのですが、
なぜか、下記のコードではグラフが重ねて表示されます。
SVGにお詳しい方、ご教示頂けますと幸いです。よろしくお願い致します。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--グラフスタイル--> <style> #test1{ background-color: #f8dce0; } #test2{ background-color: #ff0000; } </style> </head> <body> <!-- 棒グラフ --> <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="400" height="400" id="test1" class="1"></svg> <script> var svg1 = d3.select("svg"), margin = 150, width = svg1.attr("width") - margin, height = svg1.attr("height") - margin svg1.append("text") .attr("transform", "translate(100,0)") .attr("x", 45) .attr("y", 45) .attr("font-size", "20px") .text("棒グラフ") var xScale = d3.scaleBand().range([0, width]).padding(0.4), yScale = d3.scaleLinear().range([height, 0]); var g1 = svg1.append("g") .attr("transform", "translate(" + 100 + "," + 100 + ")"); d3.csv("XYZ.csv", function(error, data) { if (error) { throw error; } xScale.domain(data.map(function(d) { return d.year; })); yScale.domain([0, d3.max(data, function(d) { return d.value; })]); g1.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .append("text") .attr("y", height - 250) .attr("x", width - 100) .attr("text-anchor", "end") .attr("stroke", "black") g1.append("g") .call(d3.axisLeft(yScale).tickFormat(function(d){ return d; }) .ticks(10)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "-5.1em") .attr("text-anchor", "end") .attr("stroke", "black") g1.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return xScale(d.year); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return height - yScale(d.value); }); }); </script> <!-- 棒グラフEND --> <!-- 円グラフ --> <script src="https://d3js.org/d3.v4.min.js"></script> <svg width="400" height="400" id="test2" class="2"></svg> <script> var svg2 = d3.select("svg"), width = svg2.attr("width"), height = svg2.attr("height"), //円の大きさ radius = Math.min(width, height) / 2.5; var g2 = svg2.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var color = d3.scaleOrdinal(["#ff7f7f", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f","#ffbf7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff"]); var pie = d3.pie().value(function(d) { return d.percent; }); //文字の位置1 var path = d3.arc() .outerRadius(radius - 10) .innerRadius(radius - 80); //文字の位置2 var label = d3.arc() .outerRadius(radius) .innerRadius(radius - 100); d3.csv("browseruse.csv", function(error, data) { if (error) { throw error; } var arc = g2.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); arc.append("path") .attr("d", path) .attr("fill", function(d) { return color(d.data.browser); }); console.log(arc) arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .attr("dy", ".40em") .text(function(d) { return d.data.browser; }); arc.append("text") .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) .attr("dy", "-1.0em") .text(function(d) { return d.data.percent; }); }); //タイトルの設定 svg2.append("g") //文字位置 .attr("transform", "translate(" + (width / 2 - 50) + "," + 30 + ")") .append("text") .attr("class", "title") .attr("font-size", "20px") .text("円グラフ") </script> <!-- 円グラフEND --> </script> </body> </html>

試したこと

svgにクラスを指定したり、divで囲ったり、
該当グラフコードをsvgで囲ったりしてみましたが、重ねて表示される
現状は解消されませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ちょっと時間がないので未確認ですが、viewBox の指定を忘れてsvg 要素のサイズが0になっているときの現象に似ている気がします。

以下のようにviewBox を指定してみても治りませんか?

javascript

1<svg width="400" height="400" viewBox="0 0 400 400">

投稿2018/10/18 05:44

R.Mizukami

総合スコア1077

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

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

jam912sh

2018/10/18 05:54

R.Mizukami様、お忙しい中、ご教示頂き有難うございます。上記を参考に修正致しましたが、現状は解消されず、重なったままで御座いました。しかしながら、貴重な情報を教えて頂きありがとございます。viewBoxにつきまして、もう少し勉強致します!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問