1

最近我尝试掌握 d3js 库（这很棒）并且我正在尝试做最简单的事情，但由于某种原因它根本无法正常工作。我确实查看了相关问题，但没有人可以帮助我找到我的问题。

设置很简单，我的强制布局只有一个节点，没有链接。当用户单击该节点时，我想添加一个新节点，该节点链接到被单击的节点。到目前为止，这是我的代码。第一个添加的节点有一个非常随机的位置，之后我一直收到一条消息“未捕获的类型错误：无法读取属性 '__data__' of null”。

谢谢您的帮助 ！ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 test</title>
</head>
<body>
    <div id="viz">
    </div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        var w = 800;
        var h = 800;
        var padding = 100;
        var svg = d3.select("#viz")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        var nodes = [{name:"n0"}];
        var links = []; 
        var force = d3.layout.force()
                        .size([w, h])
                        .linkDistance([100])
                        .charge([-30])
                        .start();
        var link = svg.selectAll(".link"),
            node = svg.selectAll(".node");

        update();

        function update() {
            force.nodes(nodes)
                  .links(links)
                  .start();
            link = link.data(force.links(), function(d) {return d.source.name + "-" + d.target.name;})
                            .enter()
                            .insert("line", ".node")
                            .attr("class", "link")
                            .style("stroke", "red")
                            .style("stroke-width", 2);

            node = node.data(force.nodes(), function(d) {return d.name;})
                            .enter()
                            .append("circle")
                            .attr("class", "node")
                            .attr("r", 10)
                            .style("fill", "black")
                            .on("click", function(d) {
                                var n = {name:"n"+nodes.length};
                                nodes.push(n);
                                links.push({source:d, target:n});
                                update();
                            })
                            .call(force.drag);
        }
        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});
        });
    </script>
</body>

4

1 回答 1

2

由于我无法解释的原因，当我更改此位时它会完美运行

node = node.data(force.nodes(), function(d) {return d.name;}).enter()...

对此

node = node.data(force.nodes(), function(d) {return d.name;})
node.enter()...

对“链接”选择做同样的事情

我想这与输入选择和合作有关。

于 2013-07-02T15:16:01.817 回答