0

作为 d3.js 的初学者，我遇到了网络可视化的问题。我试图以多种方式修复它，但不幸的是没有任何效果。所以我真的需要一个建议，如果有人可以帮助我，我会很高兴。我在 d3.v3.js:5624 中遇到错误：

未捕获的类型错误：无法读取未定义的属性“权重”

我的 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() 返回的数组中的位置。例如，如果“一”链接到“二”，那么（象征性地）

Nodes = ["One", "Two"]

和

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

您可以对节点数组进行快速搜索以查找节点的索引。

还要注意节点的权重属性，一些属性名称是为 D3 保留的（见这里）

于 2013-08-12T11:06:34.227 回答