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

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

ただいまの
回答率

90.51%

  • JavaScript

    16481questions

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

  • D3.js

    79questions

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

d3.jsでファイル以外からデータの読み込み

解決済

回答 1

投稿

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

canaria369

score 17

d3.jsでファイル以外からデータの読み込をしたい

以下のURLを参考にd3.jsを用いてネットワーク図の描画を試していました.
D3.js Force-Directed Graph

ただ、Chromeなどの外部ファイルを参照するのに設定が必要なブラウザがあるのでメモリ上のJSONデータを読み込んで可視化する機構を作りたいです.

試したこと

d3.json()メソッドにJSONデータを格納した変数をぶち込んでみましたが実ファイル用みたいで描画できませんでした.

補足情報

・ブラウザ 
Chrome v61.0.3163.100
・D3
d3.js v4.11.0

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

d3.jsonを使わず以下のようにすれば、参考としてあげられているページのグラフは表示されましたが、
こういうことではないのでしょうか?

var graph = {
  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
  (略)
    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
  ]
};

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

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

//d3.json("miserables.json", function(error, graph) {
//  if (error) throw error;

  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  node.append("title")
      .text(function(d) { return d.id; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
//});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/02 12:34

    回答いただきありがとうございます。

    d3.jsonのコールバック関数の引数が読込後のjson形式だったんですね。
    ありがとうございます。

    キャンセル

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

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

関連した質問

  • 受付中

    Google Chromeが使えない

    Androidエミュレータやbracketsで突然Google Chromeが使えなくなりました。 windowsの、ファイアウォールをオフにもしてみたのですが やはり使えません。

  • 解決済

    投稿者が削除しました

    2016/2/25。質問内容を修正できないため、投稿者が一旦削除しました

  • 解決済

    Chromeでcsvを開きたい

    前提・実現したいこと jqueryでプログラムを書いています。ajaxでcsvファイルを読み込みたいのですが。Choromeではうまくいきません。 ChromeでAjaxを用い

  • 解決済

    Ajaxでポストしたデータが、送り先側の$_POSTで取得できない(基礎?)

    追記1 JSON.stringify({"first_name":"一郎", "last_name":"鈴木"}) のJSON.stringifyを省くことで手動入力した{"f

  • 解決済

    Rails エラー Routing Error

    このエラーはどう解決したらいいのでしょうか? したいことは、今作ったwebサーバをAPI化にして、 SwiftのiOSと連携させたいと思っています。 このサイトを見ながら

  • 解決済

    ajax送信時の文字化け

    入力フォームの値を変数に格納後、PHPにajax送信して登録する処理の際、 dataが「data: {name:○○}」の形式では正しく登録されますが FormDataオブジェ

  • 解決済

    JSON.parseで日付文字列

    JAvascriptのアプリでJSON形式の文字列をJSON.parseで変換したいと考えています. 文字列中に日付を想定したデータがあり,2017112なら2017年11月2

  • 解決済

    jsonデータにphpを入れたい

     前提・実現したいこと 下記のようなjsonファイルにphpのコードを入れたいです。 { "test":[ { "name":"

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

  • JavaScript

    16481questions

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

  • D3.js

    79questions

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