Enveloppement de texte en D3
J'aimerais avoir le texte pour envelopper sur le suivant D3 arbre, de sorte qu'au lieu de
Foo is not a long word
chaque ligne est emballé à
Foo is
not a
long word
J'ai essayé de faire du texte un "foreignObject", plutôt que d'un objet de texte et le texte, en effet, wrap, mais il ne bouge pas sur l'arbre de l'animation et de est tous regroupés dans le coin supérieur gauche.
Code situé à
http://jsfiddle.net/mikeyai/X43X5/1/
Javascript:
var width = 960,
height = 500;
var tree = d3.layout.tree()
.size([width - 20, height - 20]);
var root = {},
nodes = tree(root);
root.parent = root;
root.px = root.x;
root.py = root.y;
var diagonal = d3.svg.diagonal();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(10,10)");
var node = svg.selectAll(".node"),
link = svg.selectAll(".link");
var duration = 750,
timer = setInterval(update, duration);
function update() {
if (nodes.length >= 500) return clearInterval(timer);
//Add a new node to a random parent.
var n = {id: nodes.length},
p = nodes[Math.random() * nodes.length | 0];
if (p.children) p.children.push(n); else p.children = [n];
nodes.push(n);
//Recompute the layout and data join.
node = node.data(tree.nodes(root), function(d) { return d.id; });
link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; });
//Add entering nodes in the parent’s old position.
node.enter().append("text")
.attr("class", "node")
.attr("x", function(d) { return d.parent.px; })
.attr("y", function(d) { return d.parent.py; })
.text('Foo is not a long word');
//Add entering links in the parent’s old position.
link.enter().insert("path", ".node")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: d.source.px, y: d.source.py};
return diagonal({source: o, target: o});
});
//Transition nodes and links to their new positions.
var t = svg.transition()
.duration(duration);
t.selectAll(".link")
.attr("d", diagonal);
t.selectAll(".node")
.attr("x", function(d) { return d.px = d.x; })
.attr("y", function(d) { return d.py = d.y; });
}
source d'informationauteur user235236
Vous devez vous connecter pour publier un commentaire.
Vous pouvez modifier Mike Bostock de "l'Habillage de Longues Étiquettes" exemple pour ajouter
<tspan>
des éléments à votre<text>
nœuds. Il existe deux principaux changements nécessaires pour ajouter le texte justifié à vos nœuds. Je n'ai pas plonger dans avoir le texte de mise à jour de sa position pendant les transitions, mais il ne devrait pas être trop dur à ajouter.La première consiste à ajouter une fonction
wrap
en dehors de la fonction dans l'exemple ci-dessus.wrap
prendra soin d'ajouter<tspan>
éléments pour rendre votre texte s'inscrivent dans une certaine largeur:Le deuxième changement, c'est qu'au lieu de définir le texte de chaque nœud, vous devez appeler
wrap
pour chaque nœud:Une autre option, si vous êtes prêt à ajouter un autre lib JS, est d'utiliser D3plusun D3 addon. Il a intégré dans l'habillage de texte fonctionnalité. Il prend même en charge le rembourrage et le redimensionnement de texte pour remplir l'espace disponible.
Je l'ai utilisé. C'est sûr qu'il bat le calcul de l'emballage vous-même.
Il y a un autre plugin d3 disponibles pour l'habillage de texte mais je n'ai jamais utilisé donc je ne peux pas en parler, c'est l'utilité.