Javascript Girl
  1. Javascript Girl
  3. Pourquoi mon graphique dirigé par force d3 n'affiche-t-il pas les bords?
Intereting Posts
Autoriser l'application Web HTML5 à accéder à l'emplacement lorsque le navigateur n'est pas concentré (iOS) Afficher / masquer Javascript en fonction du menu déroulant Comment puis-je faire une interpolation de chaîne en JavaScript? Three.js raycast produit un réseau d'intersection vide Rechercher une colonne spécifique de tableau pour les données de table de surbrillance Angularjs ajoutant dynamiquement des champs sous diverses formes Comment puis-je supprimer la boîte de dialogue d'authentification du navigateur? Windows Phone 8: ne peut pas faire défiler le div Existe-t-il un moyen de détecter quand un fichier CSS a été entièrement chargé? Comment enregistrer la page Web en tant que fichier image à l'aide de PHP? Impossible de sélectionner l'élément h2 le plus proche en utilisant JavaScript Nœud mobile Div Up and Down utilisant Javascript / Jquery Créez par programme une image à partir d'une page Web ou d'un DIV unique Les getters et les setters Javascript pour les mannequins? IE8 v8 ne change pas de classe pour un élément DOM en dépit de la fonction JS modifiant l'attribut élément

Pourquoi mon graphique dirigé par force d3 n'affiche-t-il pas les bords?

J'ai créé un simple graphique dirigé par force en utilisant d3: http://goo.gl/afHTD

Pourquoi les bords du graphique ne s'affichent-ils pas? Voici mon fichier HTML entier. Vous pouvez également le voir et le bricoler en consultant la source sur ma page liée, bien sur. Il est basé sur l'exemple du site Web d3. 

<!DOCTYPE html> <html> <head> <title>Force-Directed Layout</title> <script type="text/javascript" src="d3.v2.js"></script> <style type="text/css"> div.node { border-radius: 6px; width: 12px; height: 12px; margin: -6px 0 0 -6px; position: absolute; } div.link { position: absolute; border-bottom: solid #999 1px; height: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } </style> </head> <body> <div id="chart"></div> <script type="text/javascript"> var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); var svg = d3.select("#chart").append("svg") .attr("width", width) .attr("height", height); d3.json("newJson.json", function(json) { force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll("line.link") .data(json.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll("circle.node") .data(json.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); node.append("title") .text(function(d) { return d.name; }); force.on("tick", function() { 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("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); }); }); </script> </body> </html>

Ne devrait-il pas var link... afficher les bords? Mon fichier JSON est également très simple: 

 {"nodes": [{"name":"Myriel","group":1}, {"name":"Napoleon","group":1}, {"name":"Napoleon","group":2}], "links": [{"source":1,"target":0,"value":1}, {"source":1,"target":0,"value":1}, {"source":1, "target":2, "value":1}]}

Vous devez appliquer un style de trait via CSS. Vos styles de nœud et de lien actuels sont limités aux éléments DIV HTML, alors que les nœuds et les liens sont représentés en tant que cercle SVG et éléments de ligne, respectivement. Essaye ça: 

 .node { fill: #000; stroke: #fff; stroke-width: 1.5px; } .link { stroke: #aaa; stroke-width: 1.5px; }