1

最近、d3js ライブラリ (これは素晴らしい) を習得しようとしましたが、最も簡単なことをしようとしていますが、何らかの理由でまったく正しく動作しません。関連する問題を調べましたが、問題を見つけるのに役立つものはありませんでした。

セットアップは簡単です。ノードが 1 つだけでリンクがない強制レイアウトがあります。ユーザーがそのノードをクリックすると、クリックされたノードにリンクされる新しいノードを追加したいと思います。これまでの私のコードは次のとおりです。最初に追加されたノードの位置は非常にランダムで、その後も「Uncaught TypeError: null のプロパティ '__data__' を読み取れません」というメッセージが表示され続けます。

ご協力ありがとうございました ！ 

<!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 に答える