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

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

ただいまの
回答率

91.35%

  • PHP

    15152questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11204questions

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

  • JSON

    775questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • D3.js

    62questions

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

idとsource,targetが一致しない

解決済

回答 1

投稿 2017/11/29 20:57 ・編集 2017/12/04 15:21

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

maigoneko

score 7

前提・実現したいこと

以下のjavascriptを用いて、d3.jsでのforceレイアウトの描画をしたいと考えています。

発生している問題・エラーメッセージ

現状だとnodes[0] = links["source"]になってしまっています。
最終的にはnodesのidをもとに、souceとtargetの関係を描画したいと考えています
(例)
nodes id:1 ユーザー:test1
nodes id:2 ユーザー:test2
source:1= nodes:id1
target:2=nodes:id2    (test1 → test2の関係)

このようにするためには、どうのように改良すればsourceの値を正しく参照できるのでしょうか?

また以下のようなエラーも、ブラウザコンソール上で発生しています

Cannot read property 'weight' of undefined
var nodes = new Array();
var links = new Array();
$.ajax({
    url: 'json4.php',
    type: "GET",
    dataType: 'json',
    scriptCharset: 'utf-8',
}).done(function(data) {
    console.log("ajax通信に成功しました");

    nodes = data["nodes"];
    links = data["links"];

    //以下描画処理
    function drawForce() {
        var width = 1200;
        var height = 600;
        console.log(nodes);
        console.log(links);

        var force = d3.layout.force()
            .nodes(nodes)
            .links(links)
            .size([width, height])
            .distance(380)
            .friction(0.9)
            .charge(-800)
            .gravity(0.1)
            .start();

        // svg領域の作成
        var svg = d3.select("body")
            .append("svg")
            .attr({
                width: width,
                height: height
            });

        // link線の描画(svgのline描画機能を利用)
        var link = svg.selectAll("line")
            .data(links)
            .enter()
            .append("line")
            .style({
                stroke: "#ccc",
                "stroke-width": 1
            });

        var g = svg.selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .call(force.drag);

        var a = g.append("a")
            .attr({
                "xlink:href": function(data) {
                    return data.url
                },
            });

        var node = a.append("image")
            .attr({
                "xlink:href": function(data) {
                    return data.pic
                },
                "width": 80,
                "height": 80
            });


        var label = a.append("text")
            .attr({
                "text-anchor": "middle",
                "fill": "black"
            })
            .style({
                "font-size": 14
            })
            .text(function(data) {
                return data.label;
            });


        force.on("tick", function() {
            link.attr({
                x1: function(d) {
                    return d.source.x;
                },
                y1: function(d) {
                    return d.source.y;
                },
                x2: function(d) {
                    return d.target.x;
                },
                y2: function(d) {
                    return d.target.y;
                }
            });
            g.attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        });
    }
    drawForce();
    //以下ajaxエラー時

}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    console.log("ajax通信に失敗しました");
    console.log("XMLHttpRequest : " + XMLHttpRequest.status);
    console.log("textStatus : " + textStatus);
    console.log("errorThrown : " + errorThrown.message);
})

console.log

イメージ説明

追記 Cannot read property 'weight' of undefined

イメージ説明
getjson.29行めはvar force = d3.layout.force()の.startの行です
78行目はdrawForce();の部分です

返信用

var nodes = new Array();
var links = new Array();
//以下描画処理
function drawForce() {
     var width = 1200;
     var height = 600;
     console.log(nodes);
     console.log(links);

    var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .size([width, height])
        .distance(380) 
        .friction(0.9) 
        .charge(-800) 
        .gravity(0.1)
        .start();

    // svg領域の作成
    var svg = d3.select("body")
        .append("svg")
        .attr({width:width, height:height});

    // link線の描画(svgのline描画機能を利用)
    var link = svg.selectAll("line")
        .data(links)
        .enter()
        .append("line")
        .style({stroke: "#ccc",
        "stroke-width": 1
    });

      var g = svg.selectAll("g")
                  .data(nodes)
                  .enter()
                  .append("g")
                  .call(force.drag);

    var a = g.append("a")
      .attr({"xlink:href":function(data){ return data.url }, });

        var node = a.append("image")
                  .attr({"xlink:href":function(data){ return data.pic },
                         "width":80,
                         "height":80
                        });



        var label = a.append("text")
                    .attr({"text-anchor":"middle",
                           "fill":"black"})
                    .style({"font-size":14})
                    .text(function(data) { return data.label; });



force.on("tick", function() {
      link.attr({x1: function(d) { return d.source.x; },
                 y1: function(d) { return d.source.y; },
                 x2: function(d) { return d.target.x; },
                 y2: function(d) { return d.target.y; }});
      g.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });
}
$.ajax({
    url: 'json4.php',
  type: "GET",
  dataType: 'json',
  scriptCharset:'utf-8',
  }).done(function(data){
    console.log("ajax通信に成功しました");
console.log(data);
    nodes = data["nodes"];
    links = data["links"];


drawForce();
//以下ajaxエラー時

}).fail(function(XMLHttpRequest, textStatus, errorThrown){
    console.log("ajax通信に失敗しました");
    console.log("XMLHttpRequest : " + XMLHttpRequest.status);
    console.log("textStatus : " + textStatus);
    console.log("errorThrown : " + errorThrown.message);
})

プロパティweight
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/12/04 14:49

    function drawForce() {}は外に、実際に呼び出しであるdrawForce();はdoneの中に。

    キャンセル

  • mts10806

    2017/12/04 14:52

    結局はweightというプロパティは存在しないというのがエラーメッセージなので、取得したオブジェクトであるdataでそういうプロパティがあるか調べる必要があります。widthと打とうとしてweightとスペルミスが起きたとか、そんな感じだとは思いますが。

    キャンセル

  • maigoneko

    2017/12/04 15:25

    自身が作成したプログラムにはjs php含めweightの記述はありませんでした しかしweightは表示されています

    キャンセル

回答 1

checkベストアンサー

+1

英語版Stackflowですが、同様のエラーにお悩みの方がいました、

色々な意見が出ていますが、
air_bobさんの回答

I encounter same problem before, it is due to there is null values in source/target of links. print out nodes and links information might help to debug
私は前に同じ問題が発生している、それはリンクのソース/ターゲットにnull値があるためです。 ノードやリンクを表示して情報をデバッグするのに役立つかもしれない(Google翻訳そのまま)


elachellさんの回答

In addition to the answers mentioning the null in the source/target of links, the reason for this could be the assignment of an out-of-range source/target. E.g. you have 10 nodes and you assign the target to be the 11-th indexed node.
リンクのソース/ターゲットにnullを示す回答に加えて、これの理由は範囲外のソース/ターゲットの割り当てになる可能性があります。 例えば。 10個のノードがあり、11番目の索引ノードになるようにターゲットを割り当てます。(Google翻訳そのまま)

が参考になるかもしれません。

ptimさんの回答は解決に至れそうなコードも載せてくれているので参考にしてください。

投稿 2017/12/04 16:47

編集 2017/12/04 17:18

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/04 19:33

    わかりました
    weightのエラーについてはStackflowを頼りにまた考えてみます

    キャンセル

  • 2017/12/09 18:09

    遅れながらも、以下の質問を参考にして問題解決まで持っていけました
    助言をいただき本当にありがとうございました!
    https://stackoverflow.com/questions/23986466/d3-force-layout-linking-nodes-by-name-instead-of-index?noredirect=1&lq=1

    キャンセル

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

ただいまの回答率

91.35%

関連した質問

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

  • PHP

    15152questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    11204questions

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

  • JSON

    775questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • D3.js

    62questions

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