Question

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

设置很简单，我的强制布局只有一个节点，没有链接。当用户点击该节点时，我想添加一个链接到被点击的节点的新节点。到目前为止，这是我的代码。第一个添加的节点有一个非常随机的位置，然后我继续发出消息“未捕获的TypeError：无法读取属性'__data__'的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>

Answer 1

由于我无法解释的原因，当我改变这个位时，它可以正常工作

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

到这个

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

对“链接”选择

也一样

我想这与输入选择和co。

有关

使用d3js单击另一个节点时添加节点

1 个答案: