web-dev-qa-db-fra.com

Ajout de plusieurs textes svg avec d3

Je suis coincé sur ce problème depuis des jours.

J'ai donc un ensemble de données d'objets de la forme suivante:

dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]

Le code suivant afficherait les 4 noms métriques dans un modèle de grille (meshy, meshx sont les points de coordonnées de la grille et meshsize est la taille de la grille, donc cela ne fait que placer le texte au milieu d'un carré de grille):

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d){
        return d.metric;
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

Maintenant, je voudrais mettre la valeur de la métrique juste sous le nom de la métrique comme ceci:

 svg.append("text")
    .data(dataset)
    .text(function(d){
        return (d.value);
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2 + 20;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2 ;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

Mais cela ne renvoie que la valeur sous le nom de la métrique pour la première métrique, les 3 autres textes de valeur ne sont même pas dans le DOM. J'ai essayé plusieurs approches, y compris le remplacement de .text par .html comme décrit ici: https://github.com/mbostock/d3/wiki/Selections#wiki-html sans succès. J'ai également essayé d'ajouter des éléments de paragraphe à la place - cela fonctionne mais les éléments p sont positionnés sous le corps svg dans une liste sans moyen évident de les déplacer dans la bonne position. Le code ci-dessus est le plus proche pour obtenir ce dont j'ai besoin, mais pour une raison quelconque, seul le premier texte de valeur s'affiche. Cependant, je suis ouvert à toute approche en d3 qui fait le travail: 4 noms métriques avec les valeurs juste en dessous

svgd3.js
15
user1452494

Dans votre deuxième bloc de code, vous ajoutez seulement un élément text, donc un seul d'entre eux apparaît. Ce que vous devez faire est d'ajouter le texte similaire à votre premier bloc, c'est-à-dire avec la sélection .enter(). Pour cela, vous avez deux choix. Vous pouvez soit enregistrer et réutiliser la sélection .enter(), soit affecter différentes classes aux deux types de texte pour pouvoir les distinguer.

Option 1:

var texts = svg.selectAll("text")
                .data(dataset)
                .enter();

texts.append("text")
     .text(function(d){
                    return d.metric;
                })
     // set position etc.

texts.append("text")
     .text(function(d){
                    return d.value;
                })
     // set position etc.

Option 2:

svg.selectAll("text.title")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "title")
                .text(function(d){
                    return d.metric;
                })
     // set position etc.

svg.selectAll("text.value")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "value")
                .text(function(d){
                    return d.value;
                })
     // set position etc.

La première option est évidemment plus courte, mais selon ce que vous voulez faire d'autre, la deuxième option peut être préférable - si vous souhaitez modifier le texte par la suite, ce sera beaucoup plus facile si vous pouvez distinguer les deux types de texte . Vous pouvez également utiliser les différentes classes pour donner différents styles CSS.

38
Lars Kotthoff