d3.js la définition dynamique de “stroke-width” sur un chemin

J'ai une question très similaire à cette une concernant la définition dynamique de la "stroke-width" attribut sur un chemin. La solution proposée était de transmettre les résultats d'une fonction à la "stroke-width" attr pour chaque chemin, ce qui est logique mais je n'arrive pas à obtenir que cela fonctionne.

Voici la déclaration qui m'a déconcerté:

 .attr("stroke-width", function(d) { return (d.interest * 50); })

(Ci-dessus fonctionne très bien et définit le chemin d'accès attr si remplacer un nombre, par exemple "5" pour la fonction.)

Voici le code complet: 

<!doctype html></html>
<meta charset="utf-8" />
<style>
.node circle {     
fill: #fff;    
stroke: steelblue;    
stroke-width: 1.5px; 
} 
.node {    
font: 16px sans-serif; 
} 
.link {    
fill: none;    
stroke: #ccc;    
}
</style> 
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"> 
var width = 800; 
var height = 500; 
var cluster = d3.layout.cluster()    
.size([height, width-200]); 
var diagonal = d3.svg.diagonal()    
.projection (function(d) { return [d.y, d.x];}); 
var svg = d3.select("body").append("svg")    
.attr("width",width)    
.attr("height",height)    
.append("g")    
.attr("transform","translate(100,0)"); 
d3.json("data.json", function(error, root){    
var nodes = cluster.nodes(root);    
var links = cluster.links(nodes);    
var link = svg.selectAll(".link")       
.data(links)       
.enter().append("path")       
.attr("class","link")
.attr("stroke-width", function(d) { return (d.interest * 50); })
.attr("d", diagonal);
var node = svg.selectAll(".node")       
.data(nodes)       
.enter().append("g")       
.attr("class","node")       
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 
node.append("circle")       
.attr("r", function(d) { return d.interest * 50 ;});    
node.append("text")       
.attr("dx", function(d) { return (d.interest * 50) ;})       
.attr("dy", function(d) { return -(d.interest * 50) ;})       
.style("text-anchor", function(d) { return d.children ? "end" : "start"; })      
.text( function(d){ return d.name + " ("+ d.interest*100 + "%)";}); 
}); 
</script>

Et voici un exemple de JSON: 

        {
"name": "Root",
"date": 1950,
"interest": 1.0,
"children": [
{
"name": "Anne",
"date": 1970,
"interest": 0.5,
"children": [
{
"name": "Charles",
"date": 1988,
"interest": 0.25,
"children": [
{
"name": "Frank",
"date": 2010,
"interest": 0.125,
"children": []
},
{
"name": "Gina",
"date": 2010,
"interest": 0.125,
"children": []
}
]
},
{
"name": "Diane",
"date": 1995,
"interest": 0.25,
"children": [
{
"name": "Harley",
"date": 2015,
"interest": 0.25,
"children": []
}
]
}
]
},
{
"name": "Ben",
"date": 1970,
"interest": 0.5,
"children": [
{
"name": "Erin",
"date": 1970,
"interest": 0.5,
"children": [
{
"name": "Ingrid",
"date": 1970,
"interest": 0.16665,
"children": []
},
{
"name": "Jack",
"date": 1970,
"interest": 0.16665,
"children": []
},
{
"name": "Kelsey",
"date": 1970,
"interest": 0.16665,
"children": []
}
]
}
]
}
]
}
Avez-vous essayez d'utiliser .style('stroke-width', ...) à la place?
J'ai essayé ".attr(...)" et ".style(...)". La seule différence que j'ai trouver est avec .attr je peut voir le style de "largeur" de l'attribut ajouté à la <chemin ...> élément stroke-width="NaN" et avec .style je ne vois pas l'influence. De toute façon je ne peux pas obtenir les résultats souhaités de changer le chemin d'accès de la largeur du trait. La même fonction dans la définition de l'attribut radius [comme dans le nœud.append("cercle") .attr("r", function(d) { return d.d'intérêt * 50 ;}); ...] pour le cercle nœud et je suis donc toujours à une perte.
Le NaN est votre indice. Lorsque vous êtes en multipliant d.interest * 50, le résultat est "Pas un Nombre". Raisons possibles: soit d n'est pas réglé correctement sur votre chemin, ou d.interest n'est pas un nombre valide. En regardant ton code, il semble que d existe, mais n'est-ce pas ce que vous en pensez, et si d.interest n'existe pas. d, pour les chemins, est un lien d'objet contenant les valeurs source et cible. L'intérêt que les valeurs sont contenues dans le nœud de données objets.
Merci pour votre commentaire; il a un sens quand vous expliquez que vous avez. Avez-vous comment je pourrais faire référence aux valeurs de la d.intérêt dans les nœuds de l'objet afin de régler la largeur du trait" pour lier des objets?
La description du nœud et de lier des objets de données est disponible sur le wiki. Si vous voulez utiliser de l'enfant interest valeur pour la largeur de la ligne, vous devez utiliser d.child.interest.

OriginalL'auteur XonAether | 2014-09-19

  1. 10

    Grâce à @AmeliaBR j'ai été en mesure d'obtenir la largeur du trait de travailler comme je l'ai désiré. J'ai changé la référence à la valeur de d.interest à d.target.interest comme suit:

    .attr("stroke-width", function(d) { return (d.target.interest * 50); })

    J'ai vraiment apprécié les conseils et l'aide.

    OriginalL'auteur XonAether