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"])

... 选择现有的组元素（即您刚刚创建的那个）并与这些元素执行数据连接。enter() 选择将为空，因为您选择的元素已经存在于 DOM 中。因此后面的部分.enter()将不会被执行，l选择将为空。

您必须使选择器更具体，例如：

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

Thinking with Joins文章很好地解释了数据连接的概念。另请参阅通用更新模式（I、II、III）以获取有关在数据连接期间将遇到的不同类型选择的更多详细信息。

于 2013-01-22T02:37:47.437 回答