2013-03-30 4 views
8

Я не могу отображать метки узлов с использованием силового макета в d3.js.D3.js, force-graph, не может отображать текст/метку узлов

Я пытаюсь с этим примером 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 + ")"; 
    }); 
} 

Почему ярлыки не отображаются?

ответ

3

Вам необходимо отдельно добавить текст:

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

+5

Для жизни меня я не могу получить эти ярлыки появляются , Я начал с примера здесь http://bl.ocks.org/mbostock/4600693, который уже делает всплывающие подсказки, но не работает. Есть ли еще один шаг, чтобы сообщить d3, что текстовый атрибут должен быть визуализирован? – Colin

+0

Обратите внимание, чтобы не добавлять текстовый элемент внутри круга. Если вы скопируете пасту с сайта http://bl.ocks.org/mbostock/2706022 (с надписью) и https://bl.ocks.org/mbostock/4062045 (без ярлыков), то немного отличий. Текст ** svg ** и ** circle ** svg добавляется к группе ** g **. – user305883