D3.js, force-graph, 无法显示节点的文本/标签 [英] D3.js, force-graph, cannot display text/label of nodes

问题描述

我无法在 d3.js 中使用强制布局显示节点标签.

I cannot display labels of nodes using a force-layout in d3.js.

我正在尝试这个例子 http://d3js.org/d3.v3.min.js

我更新了该代码，只添加了缩放功能，如下所示:

I updated that code only adding zoom, like this:

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append('svg:g').call(d3.behavior.zoom().on("zoom", redraw));

function redraw() {
    console.log("here", d3.event.translate, d3.event.scale);
    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
    node.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

为什么不显示标签?

推荐答案

需要单独添加文字:

node.append("text")
    .attr("dx", ".10em")
    .attr("dy", ".10em")
    .text(function(d) { return d.name; });

查看这些示例:

http://bl.ocks.org/mbostock/2706022

http://bl.ocks.org/mbostock/1153292

这篇关于D3.js, force-graph, 无法显示节点的文本/标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！