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

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

ただいまの
回答率

88.64%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 943

jam912sh

score 23

 前提・実現したいこと

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/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/18 14:54

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

    キャンセル

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

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

関連した質問

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