Question

作为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; });
            });

         });
});

我知道，我犯了一些愚蠢的错误，但我太傻了，无法理解：（

Answer 1

链接列表的源和目标属性不应指向节点名称，而应指向它们在force.nodes（）返回的数组内的位置。例如，如果“One”链接到“Two”，则（符号）

Nodes = ["One", "Two"]

和

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

您可以在节点阵列上快速搜索以查找节点的索引。

还要注意节点的Weight属性，为D3保留一些属性名称（参见here）

d3.js，网络可视化

1 个答案: