2013-03-30 12 views
8

Ich kann keine Label von Knoten mit einem Force-Layout in d3.js anzeigen.D3.js, force-graph, Text/Label von Knoten kann nicht angezeigt werden

ich mit diesem Beispiel http://d3js.org/d3.v3.min.js

aktualisiert versuche ich nur, dass Code Zoom Hinzufügen wie folgt aus:

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

Warum werden nicht angezeigt Etiketten?

Antwort

3

Sie müssen separat den Text hinzufügen:

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

siehe folgende Beispiele:

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

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

+5

Für das Leben von mir, dass ich nicht diese Etiketten bekommen erscheinen . Ich begann mit dem Beispiel hier http://bl.ocks.org/mbostock/4600693, das bereits Tooltipps macht, aber nicht funktioniert. Gibt es einen zusätzlichen Schritt, um d3 mitzuteilen, dass das Textattribut gerendert werden soll? – Colin

+0

Achten Sie darauf, das Textelement nicht innerhalb des Kreises anzuhängen. Wenn Sie Paste von http://bl.ocks.org/mbostock/2706022 (mit Etiketten) und https://bl.ocks.org/mbstock/4062045 (keine Etiketten) kopieren, gibt es kleine Unterschiede. Text ** Svg ** und ** Kreis ** Svg wird an eine Gruppe ** g ** Element angefügt. – user305883