D3 de la force de mise en page: Comment puis-je définir la taille de chaque nœud?

Je suis à l'aide de l'incroyable D3JS pour construire un graphique. Le graphique est rendu, mais je veux que mon nœuds d'avoir chacune sa taille.

Les données est de cette forme :

{source: "Antony Hoppkins", target: "Woody Allen", valeur: 3}

Voici le code :

var links = graph.links;
var nodes = {};
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});
});
var width = 1200,
height = 1500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("#network").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("stroke-width", function(d) { return (d.value)*5; })
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 5);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
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; });
node
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 10)
;
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 5)
;
}

Toutes les pensées ?

OriginalL'auteur occulti | 2013-12-21

  1. 12

    Je suis en supposant que vous souhaitez définir la taille de chaque nœud (i.e. rayon) selon .value. Vous le faire comme ceci:

    node.append("circle")
.attr("r", function(d) { return d.value * 3; });

    Vous pouvez bien sûr ajuster le facteur, ou d'utiliser une échelle à la place.

    Déjà essayé. C'est ce que j'obtiens : Error: Invalid value for <circle> attribute r="NaN" j'ai même ajouté un parseInt(d.value) mais en vain.
    Pourriez-vous poster un travail complet exemple s'il vous plaît?
    Si l'obtention d'un travail complet exemple l'exécution n'est pas possible, à moins de post ce que la structure de données ressemble quand vous ne function(d) { console.log(d); console.log(d.value) }. La plupart de la d3 méthodes de présentation de créer un d.value objet contenant les données d'origine; si vos données d'origine a également été un objet avec un .la valeur de l'attribut, vous pourriez avoir besoin d'utiliser d.value.value.

    OriginalL'auteur Lars Kotthoff

  2. 3

    Je suis à la recherche de ce trop et a essayé de contourner un peu.
    Je pense que chaque objet dans votre base de données doit être un identifiant unique (ou tout simplement parcourir). Ensuite, dans votre code à node objet que vous pourriez écrire quelque chose comme ceci:

    var node = svg.selectAll(".node")
.data(graph.nodes)
.attr("r", function(d){
if (d.value === myUniqueId){
return 3;
} else {
return 10;
}
})

    ici la "r" est pour le radious.Le value est un nom dans ma db (il peut être tout ce que vous voulez). Là, vous pouvez modifier les nœuds tailles.
    Je sais que ce n'est pas un code propre, mais je suis juste un débutant.
    Espérons que cela aide!

    OriginalL'auteur cs.matyi