0

リンクされたリストを視覚化しています。楽しみと d3.js の学習のためにやっているだけです。円 (ノードを表す) のグループ要素を作成できます。しかし、その後新しいグループ要素が追加されない理由がわかりません。この新しいグループに線/矢印 (.next 参照表現) を含めたいと思います。コードが実行されているCDTを介してデバッグしましたが、DOMには何も追加されていません。

var g = svg.selectAll("g")
        .data(dataArr)
    .enter().append("g")
        .attr("transform", function() {
            if (addMethod === "headAdd") {
                return "translate(" + 50 + " ," + y + ")";
            } else {
                return "translate(" + x + " ," + y + ")";
            }
        })
        .attr("class", "nodes")
        .attr("id", function(d) { return d.getData(); });

    // Create a circle representing the node.
    g.append("circle")
        .attr("r", 40)
        .style("fill", "#7DC24B")
        .style("stroke", "#122A0A")
        .style("stroke-width", 5)
        .style("opacity", 0)
        .style("stroke-opacity", 0.8)
        .transition().duration(1000).style("opacity", 1);

    // Add data to the node.
    g.append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .style("fill", "#ffffff")
        .text(function(d) { return d.getData(); });


    // Create the "next" arrow.
    // l is the line group that will enclose the line
    // and the text.

    // This doesn't seem to be working from here below.
    var l = svg.selectAll("g")
        .data(["1"])
    .enter().append("g")
        .attr("class", "lines")
        .attr("transform", "translate(" + (x + 40) + ", " + y + ")");

    l.append("line")
        .attr("x1", x + 40)
        .attr("y1", y)
        .attr("x2", x + 100)
        .attr("y2", y)
        .style("stroke", "#8EBD99")
        .style("stroke-width", 30);
4

1 に答える 1

2

...

var l = svg.selectAll("g")
        .data(["1"])

... 既存のグループ要素 (つまり、作成したばかりの要素) を選択し、それらとのデータ結合を実行します。選択した要素がすでに DOM に存在していたため、enter() の選択は空になります。したがって、後の部分.enter()は実行されず、l選択は空になります。

次のように、セレクターをより具体的にする必要があります。

var l = svg.selectAll(".lines")
        .data(["1"])

Thinking with Joinsの記事は、データ結合の概念をうまく説明しています。データ結合中に発生するさまざまな種類の選択の詳細については、一般的な更新パターン (I、II、III)も参照してください。

于 2013-01-22T02:37:47.437 に答える