0

d3.js の初心者として、ネットワークの視覚化で問題に遭遇しました。私は多くの方法でそれを修正しようとしていましたが、残念ながらうまくいきません。だから私は本当にアドバイスが必要です、誰かが私を助けることができればうれしいです. d3.v3.js:5624 でエラーが発生します。

キャッチされていない TypeError: 未定義のプロパティ 'weight' を読み取ることができません

私のjsonはコントローラーで生成されており、次のようになります。

{ "nodes" : 
[{ "Name" : "One", "Weight" : 903 }, 
 { "Name" : "Two", "Weight" : 502 },
...
], 
"links" : 
[{ "Source" : "One", "Target" : "Two", "Volume" : 2 }, 
 { "Source" : "Two", "Target" : "Five", "Volume" : 1 }, 
...
]
}

だから私は電話している

return Json(network, JsonRequestBehavior.AllowGet);

クラス ネットワーク:

public class Network
        {
            public List<NetworkNodes> nodes {get; set;}
            public List<NetworkLinks> links{ get; set;}
            public Network(List<NetworkNodes> a, List<NetworkLinks> b)
            {
                nodes = a;
                links = b;
            }

        }

そしてスクリプト自体：

$(document).ready(function () {

    var width = 1500,
        height = 1500;

    var force = d3.layout.force()
                .charge(-100)
                .linkDistance(30)
                .size([width, height]);

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

        $.getJSON('@Url.Action("BuildNetwork", "Query")', function (graph) {
        // Compute the distinct nodes from the links.
            force
                .nodes(graph.nodes)
                .links(graph.links)
                .start();

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

            var node = svg.selectAll(".node")
                .data(graph.nodes)
                .enter().append("circle")
                .attr("class", "node")
                .attr("r", 5)
                .call(force.drag);

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

         });
});

私が犯したいくつかのばかげた間違いがあることは知っていますが、私はあまりにも愚かすぎてどこを理解できません:(

4

1 に答える 1

0

リンク リストのソース プロパティとターゲット プロパティは、ノード名を指すのではなく、force.nodes() によって返される配列内の位置を指す必要があります。たとえば、「One」が「Two」にリンクされている場合、(シンボリックに)

Nodes = ["One", "Two"]

と

Links = [{source: 0, target: 1}]

ノード配列でクイック検索を実行して、ノードのインデックスを見つけることができます。

また、ノードの Weight プロパティにも注意してください。一部のプロパティ名は D3 用に予約されています (こちらを参照)

于 2013-08-12T11:06:34.227 に答える