d3.jsのjsonからグラフデータ（ノード、リンク）を抽出できません

debugcn 投稿 Dev

Seemu Bisht

何日も努力した後、私はついに最初のd3.jsレイアウトを作成しました。しかし今、私はデータとスクリプトを分離したいと思います。JSONを使用してデータを保持し、そこから抽出しようとしていました。しかし、それはうまくいきませんでした。助けてください。

私はこれを試しましたが、失敗し始めました：

d3.json("sample.json", function(data) {
  var link = svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(data.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(data.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));
...
)};

これが私が取り組んでいる完全なコードです。

JSFIDDLE：d3_graph_labelled_edge.js

シャシャンク

無効なJSON。フォーマット後（最後の行のコンマを削除し、一重引用符を二重に置き換えます）：

{
"nodes": [{
        "name": "NE1",
        "full_name": "NE1",
        "type": 2,
        "slug": "12.3",
        "entity": "company",
        "img_hrefD": "",
        "img_hrefL": ""
    },
    {
        "name": "NE2",
        "full_name": "NE2",
        "type": 2,
        "slug": "12.4",
        "entity": "company",
        "img_hrefD": "",
        "img_hrefL": ""
    },
    {
        "name": "NE3",
        "full_name": "NE3",
        "type": 2,
        "slug": "12.3",
        "entity": "company",
        "img_hrefD": "",
        "img_hrefL": ""
    },
    {
        "name": "NE4",
        "full_name": "NE4",
        "type": 2,
        "slug": "12.1",
        "entity": "company",
        "img_hrefD": "",
        "img_hrefL": ""
    },
    {
        "name": "NE5",
        "full_name": "NE5",
        "type": 2,
        "slug": "12.0",
        "entity": "company",
        "img_hrefD": "",
        "img_hrefL": ""
    }
],
"links": [{
        "source": 0,
        "target": 1,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 0,
        "target": 2,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 0,
        "target": 3,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 1,
        "target": 2,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 1,
        "target": 3,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 2,
        "target": 3,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    },
    {
        "source": 1,
        "target": 4,
        "value": 1,
        "distance": 15,
        "a": "123",
        "z": "111"
    }
]
}

ここでは上記のJSONを使用してplunkrだ：http://plnkr.co/edit/vRrYyjH3mtPz8vEuTZKx?p=preview

推奨事項：検証にはJSONLintを使用してください。

お役に立てれば。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]