Question

我需要在此D3力导向图表中添加文本标签（来自Zoomable Force Directed Graph d3v4 link）。但是，我不明白为圆圈和链接添加标签所需的编辑。节点标签是属性“node.label”，边缘标签是属性“edge.label”。这个d3 Node Labeling解释了所需的编辑，但我无法让它工作（不幸的是我不是JS程序员）。如何编辑它以便可以为节点添加属性“node.label”，并将“edge.label”属性添加到边缘？

//add encompassing group for the zoom
var g = svg.append("g")
    .attr("class", "everything");

//draw lines for the links
var link = g.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links_data)
    .enter().append("line")
    .attr("stroke-width", 2)
    .style("stroke", linkColour);

//draw circles for the nodes
var node = g.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(nodes_data)
        .enter()
        .append("circle")
        .attr("r", radius)
        .attr("fill", circleColour);

Answer 1

你可以做的是让你的节点成为一个＆lt; g>而是一个圆圈，添加一个文本。您还必须更改tickActions函数，以便它移动＆lt; g> ：

将节点绘制为g：

var node = g.append("g")
        .attr("class", "nodes")
        .selectAll(".node")
        .data(nodes_data)
        .enter()
        .append("g")
        .attr("class","node")
        .each(function(d){
            d3.select(this)
                    .append("circle")
                    .attr("r", radius)
                    .attr("fill", circleColour(d));
            d3.select(this)
                    .append("text").text(d.name)
                    .attr("dy",radius+10)
                    .style("text-anchor","middle");
        });

tick功能：

function tickActions() {
    //update node positions each tick of the simulation
    node
            .attr("transform", function(d) { return "translate("+d.x+","+ d.y+")"; });

    //update link positions
    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; });
}

D3网络图：添加文字

1 个答案: