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

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

ただいまの
回答率

90.52%

  • JavaScript

    16398questions

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

  • HTML

    8963questions

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

  • CSS

    5780questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • D3.js

    79questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

ブラウザに表示させるウインドウのサイズの自動調整

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 136

byh01337

score 0

 前提・実現したいこと

実はjavascript, htmlに関する経験がゼロに等しいのですが、どうしても急ぎで可視化して理解したいことがありまして、見よう見まねで下のコードを書いて試してみました。そこそこ動いてくれたのですが、行き詰まっているのは次の点です。

 次の1,2は同じことかもしれませんが、理解してそう思うわけではありませんので分けてお尋ねします。

1 データ数に合わせて画面表示を自動調節し、表示が見きれないようにしたい。
2 A4またはA3サイズ一枚に印刷したい。

 また、以下はおまけですが

3 Windows, Macintoshいずれのマシンにも最新版のChromeをインストールしているにもかかわらず、作成したhtmlファイルがWindows 7/Chromeで表示され、Macintosh/Chrome 67.0.3396.99で表示されない理由がわからない。なお、OS 10.11.6 /Safari 9.1.2 で作業できています。

 該当のソースコード

html + javascript

<!DOCTYPE html>
<meta charset="utf-8">
    <style>

        .node {
            stroke: #fff;
            stroke-width: 4.5px;
        }

        .link {
            stroke: #808080;
            stroke-opacity: .6;
        }

    </style>
<body>
<script src="js/d3.js"></script>
<script>

    var width = 840;
    var height = 1188;
    var textcoler = "#000", color = d3.scale.category10();

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var force = d3.layout.force()
        .charge(-2200)
        .linkDistance(function(d) { return d.linkdistance; })
        .size([width, height]);

d3.json("mapping.json", function(error, json) {
    if (error) throw error;

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

    var link = svg.selectAll(".link")
        .data(json.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) { return d.width; });

    var node = svg.selectAll(".node")
        .data(json.nodes)
        .enter().append("g")
        .attr("class", "node")
        .call(force.drag);

       var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; }); 

    var arc = d3.svg.arc()
        .outerRadius(function(d){ return d.value;})
        .innerRadius(0);

        node.selectAll("path")
        .data(function(d, i) {return pie(d.proportions); })
        .enter()
        .append("svg:path")
        .attr("d", arc)
        .attr("fill", function(d, i) { return color(d.data.group); });


    node.append("text")
      .attr("text-anchor", "middle")
      .attr("dx", 0)
      .attr("dy", 0)
      .style('fill', textcoler)
      .style('stroke', "none")
      .style("font-weight", "bold")
      .attr("font-size", function(d) { return d.textsize; })
      .text(function(d) { return d.name });

    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

        node.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; })
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"});

  });
});

</script>

 試したこと

(申し訳ありませんが知識と理解の不足で、どこを試せばいいのか見当がついておりません。)

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

以下は、用いたサンプルデータの一つです。

{
"nodes":[
{"name":"A","textsize": 48, "proportions": [
{"group": 2, "value": 34},
{"group": 3, "value": 39},
{"group": 1, "value": 56},
{"group": 5, "value": 31},
{"group": 4, "value": 52}]
},
{"name":"B","textsize": 48, "proportions": [
{"group": 2, "value": 3},
{"group": 3, "value": 25},
{"group": 1, "value": 34},
{"group": 5, "value": 13},
{"group": 4, "value": 16}]
},
{"name":"C","textsize": 48, "proportions": [
{"group": 2, "value": 19},
{"group": 3, "value": 13},
{"group": 1, "value": 21},
{"group": 5, "value": 13},
{"group": 4, "value": 11}]
},
{"name":"D","textsize": 48, "proportions": [
{"group": 2, "value": 11},
{"group": 3, "value": 17},
{"group": 1, "value": 16},
{"group": 5, "value": 13},
{"group": 4, "value": 19}]
},
{"name":"E","textsize": 48, "proportions": [
{"group": 2, "value": 24},
{"group": 3, "value": 14},
{"group": 1, "value": 19},
{"group": 5, "value": 12},
{"group": 4, "value": 6}]
},
{"name":"F","textsize": 48, "proportions": [
{"group": 2, "value": 12},
{"group": 3, "value": 32},
{"group": 1, "value": 10},
{"group": 5, "value": 7},
{"group": 4, "value": 12}]
},
{"name":"G","textsize": 48, "proportions": [
{"group": 2, "value": 5},
{"group": 3, "value": 14},
{"group": 1, "value": 37},
{"group": 5, "value": 10},
{"group": 4, "value": 4}]
},
{"name":"H","textsize": 48, "proportions": [
{"group": 2, "value": 13},
{"group": 3, "value": 21},
{"group": 1, "value": 16},
{"group": 5, "value": 11},
{"group": 4, "value": 6}]
},
{"name":"I","textsize": 48, "proportions": [
{"group": 2, "value": 13},
{"group": 3, "value": 14},
{"group": 1, "value": 16},
{"group": 5, "value": 14},
{"group": 4, "value": 8}]
},
{"name":"J","textsize": 48, "proportions": [
{"group": 2, "value": 9},
{"group": 3, "value": 14},
{"group": 1, "value": 14},
{"group": 5, "value": 12},
{"group": 4, "value": 14}]
}
],

"links":[
{"source": 0, "target": 1, "linkdistance":156, "width":14},
{"source": 3, "target": 9, "linkdistance":156, "width":14}
]
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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

  • JavaScript

    16398questions

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

  • HTML

    8963questions

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

  • CSS

    5780questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • D3.js

    79questions

    D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。