web-dev-qa-db-fra.com

d3 ajouter du texte au cercle

J'essaie d'ajouter du texte dans un cercle. J'ai suivi l'exemple de n tutoriel de mbostock , mais je n'ai pas réussi à obtenir le bon résultat.

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 comment obtenir ce travail?

javascriptsvgd3.js
56
gizmo

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

enter image description here

L'idée principale est d'encapsuler le texte et le cercle dans le même "div" que vous feriez en HTML pour que le logo et le nom de la société soient dans le 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 d.r} )
        .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>
74
Christopher Chiche

Peut-être, reculez-vous et laissez tomber le JSN jusqu'à ce que vous maîtrisiez bien la théorie.

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

3
zeffii

Voici une manière que je considère plus facile: L’idée générale est de vouloir ajouter un élément de texte à un élément de cercle, puis de jouer avec ses attributs "dx" et "dy" jusqu'à ce que vous positionniez le texte au point du cercle que vous avez défini. comme. Dans mon exemple, j'ai utilisé un nombre négatif pour le dx puisque je voulais que le texte commence à la gauche du centre.

const nodes = [ {id: ABC, group: 1, level: 1}, {id:XYZ, group: 2, level: 1}, ]

const nodeElems = svg.append('g')
.selectAll('circle')
.data(nodes)
.enter().append('circle')
.attr('r',radius)
.attr('fill', getNodeColor)

const textElems = svg.append('g')
.selectAll('text')
.data(nodes)
.enter().append('text')
.text(node => node.label)
.attr('font-size',8)//font size
.attr('dx', -10)//positions text towards the left of the center of the circle
.attr('dy',4)
2
Kenaa