Question

我正在尝试在D3强制布局中向节点添加标签，但似乎存在一些问题。所有文本都显示在屏幕顶部，彼此重叠。以下是代码段：

var link = g.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line");

var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 2.5)
    .on('click', clicked);

var text = g.append("g")
    .attr("class", "labels")
    .selectAll("text")
    .data(graph.nodes)
    .enter().append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

Answer 1

SVG左上角堆积的元素（原点）是几个问题的症状，其中包括：

NaN代表职位
未设置职位
不翻译元素
不包括tick函数

当你有一个力量指导图表时，最后一个是显而易见的原因。

解决方案：您必须在text功能中加入ticked。

function ticked() {
    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; });

    text.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });
}

文本未在D3强制布局中显示为标签

1 个答案: