Javascript Girl
  1. Javascript Girl
  3. D3 ajouter du texte au cercle
Intereting Posts
Test XHR à Jest Puis-je contrôler l'icône de chargement du navigateur? Comment obtenir la position supérieure d'un élément? Comment obtenir une liste de jours dans un mois avec Moment.js Qu'est ce que while (i–) signifie dans javascript? Le menu déroulant Aurelia Semantique Affectation variable dans une condition 'if' en JavaScript Charger l'Iframe en fonction de l'épaisseur de l'écran Backbone Objet n'a pas de méthode appliquée – problème avec bind Javascript: ajoutez le texte dans div? Redirection JavaScript en fonction du référent? Texte / javascript vs application / javascript Est-ce que quelqu'un a eu le traitement.js fonctionnant dans IE? En utilisant javascript pour protéger le mot de passe pdf Citation unique échouée dans les paramètres de la fonction JavaScript

D3 ajouter du texte au cercle

J'essaie d'ajouter du texte dans le cercle. J'ai suivi l'exemple de http://mbostock.github.com/d3/tutorial/circle.html mais je n'ai pas pu obtenir la bonne sortie.

L'extrait de code est: 

var data; var code; d3.json("/json/trace.json", function(json) { data = json; console.log(data); // get code for visualization code = data["code"]; alert(code); var mainSVG = d3.select("#viz") .append("svg") .attr("width", 900) .attr("height", 900); mainSVG.append("circle") .style("stroke", "gray") .style("fill", "white") .attr("r", 100) .attr("cx", 300) .attr("cy", 300); circle = mainSVG.selectAll("circle").data([code]); }) ;

Des suggestions sur la façon de faire fonctionner ce travail? Merci beaucoup!

Voici un exemple montrant un certain texte en chiffres avec des données d'un fichier json: http://bl.ocks.org/4474971 . Ce qui donne ce qui suit:

Entrez la description de l'image ici

L'idée principale derrière cela est d'encapsuler le texte et le cercle dans le même " div " que vous le feriez en html pour avoir le logo et le nom de l'entreprise dans la même div dans un en-tête de page.

Le code principal est: 

 var width = 960, height = 500; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) d3.json("data.json", function(json) { /* Define the data for the circles */ var elem = svg.selectAll("g") .data(json.nodes) /*Create and place the "blocks" containing the circle and the text */ var elemEnter = elem.enter() .append("g") .attr("transform", function(d){return "translate("+d.x+",80)"}) /*Create the circle for each block */ var circle = elemEnter.append("circle") .attr("r", function(d){return dr} ) .attr("stroke","black") .attr("fill", "white") /* Create the text for each block */ elemEnter.append("text") .attr("dx", function(d){return -20}) .text(function(d){return d.label}) })

Et le fichier json est: 

 {"nodes":[ {"x":80, "r":40, "label":"Node 1"}, {"x":200, "r":60, "label":"Node 2"}, {"x":380, "r":80, "label":"Node 3"} ]}

Le code html résultant montre l'encapsulation souhaitée: 

 <svg width="960" height="500"> <g transform="translate(80,80)"> <circle r="40" stroke="black" fill="white"></circle> <text dx="-20">Node 1</text> </g> <g transform="translate(200,80)"> <circle r="60" stroke="black" fill="white"></circle> <text dx="-20">Node 2</text> </g> <g transform="translate(380,80)"> <circle r="80" stroke="black" fill="white"></circle> <text dx="-20">Node 3</text> </g> </svg>

Peut-être, faites un peu de recul et déposez le json jusqu'à ce que vous ayez une idée de la théorie.

http://tributary.io/inlet/4132672/ (exemple en direct, présenté par enjalot dans cette vidéo . Je suggère fortement de vérifier les autres vidéos d3 qu'il a.

Extension de l'exemple ci-dessus pour répondre aux exigences réelles, où le cercle est rempli de couleur d'arrière-plan solide, puis avec motif rayé et après que ce nœud de texte est placé au centre du cercle. 

 var width = 960, height = 500, json = { "nodes": [{ "x": 100, "r": 20, "label": "Node 1", "color": "red" }, { "x": 200, "r": 25, "label": "Node 2", "color": "blue" }, { "x": 300, "r": 30, "label": "Node 3", "color": "green" }] }; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) svg.append("defs") .append("pattern") .attr({ "id": "stripes", "width": "8", "height": "8", "fill": "red", "patternUnits": "userSpaceOnUse", "patternTransform": "rotate(60)" }) .append("rect") .attr({ "width": "4", "height": "8", "transform": "translate(0,0)", "fill": "grey" }); function plotChart(json) { /* Define the data for the circles */ var elem = svg.selectAll("g myCircleText") .data(json.nodes) /*Create and place the "blocks" containing the circle and the text */ var elemEnter = elem.enter() .append("g") .attr("class", "node-group") .attr("transform", function(d) { return "translate(" + dx + ",80)" }) /*Create the circle for each block */ var circleInner = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", function(d) { return d.color; }); var circleOuter = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", "url(#stripes)"); /* Create the text for each block */ elemEnter.append("text") .text(function(d) { return d.label }) .attr({ "text-anchor": "middle", "font-size": function(d) { return dr / ((dr * 10) / 100); }, "dy": function(d) { return dr / ((dr * 25) / 100); } }); }; plotChart(json); 
 .node-group { fill: #ffffff; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>