【问题标题】:D3.js, force-graph, cannot display text/label of nodesD3.js,force-graph,无法显示节点的文本/标签
【发布时间】:2013-03-20 19:59:32
【问题描述】:

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

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

我更新了只添加缩放的代码,如下所示:

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 + ")";
    });
}

为什么不显示标签?

【问题讨论】:

    标签: graph d3.js data-visualization labels force-layout


    【解决方案1】:

    需要单独添加文字:

    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

    【讨论】:

    • 我这辈子都无法让这些标签出现。我从bl.ocks.org/mbostock/4600693 的示例开始,它已经提供了工具提示但无法正常工作。是否有额外的步骤告诉 d3 应该呈现文本属性?
    • 注意不要在圆圈内附加文本元素。如果您从bl.ocks.org/mbostock/2706022(有标签)和bl.ocks.org/mbostock/4062045(无标签)复制粘贴,差别不大。文本 svgcircle svg 附加到组 g 元素。
    猜你喜欢
    • 1970-01-01
    • 2022-10-17
    • 2013-04-27
    • 2016-10-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多