0
J'utilise l'exemple de mise en page de force hereAjouter des étiquettes pour forcer la mise en page où les données ne sont côté client (D3)
je besoin d'ajouter des étiquettes aux nœuds. Tous les exemples que j'ai vu utiliser quelque chose comme ceci:
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
Mais cela fonctionne quand il y a une fonction appelée sur les données locales telles que:
d3.json("graph.json", function(error, json) {
Mais dans mon exemple les données sont tout côté client et ne nécessite donc pas que d3.json le passe. Comment puis-je ajouter des étiquettes à chaque noeud dans ce scénario? Voici le code que je utilise:
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
// set a width and height for our SVG
var width = 1000,
height = 800;
// setup links
var links = [
{ source: 'Baratheon', target:'Lannister' },
{ source: 'Baratheon', target:'Stark' },
{ source: 'Lannister', target:'Stark' },
{ source: 'Stark', target:'Bolton' },
];
// create empty nodes array
var nodes = {};
// compute nodes from links data
links.forEach(function(link) {
link.source = nodes[link.source] ||
(nodes[link.source] = {name: link.source});
link.target = nodes[link.target] ||
(nodes[link.target] = {name: link.target});
});
// add a SVG to the body for our viz
var svg=d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
// use the force
var force = d3.layout.force()
.size([width, height])
.nodes(d3.values(nodes))
.links(links)
.on("tick", tick)
.linkDistance(300)
.start();
// add links
var link = svg.selectAll('.link')
.data(links)
.enter().append('line')
.attr('class', 'link');
// add nodes
var node = svg.selectAll('.node')
.data(force.nodes())
.enter().append('circle')
.attr('class', 'node')
.attr('r', width * 0.01);
// what to do
function tick(e) {
node.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.call(force.drag);
link.attr('x1', function(d) { return d.source.x; })
.attr('y1', function(d) { return d.source.y; })
.attr('x2', function(d) { return d.target.x; })
.attr('y2', function(d) { return d.target.y; });
}
</script>