Ajout de plusieurs textes svg avec d3

J'ai été coincé sur ce problème pendant des jours.

Donc, j'ai un jeu 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 pour afficher l'4 tonnes de noms dans un motif de grille (bandage, meshx sont les coordonnées des points de la grille et meshsize est la taille de la grille, donc c'est juste de mettre le texte au milieu d'un carré de la 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 en dessous de la métrique nom comme:

 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 la valeur en dessous de la métrique, du nom de la PREMIÈRE métrique, les 3 autres de la valeur des textes ne sont même pas dans les DOM. J'ai essayé plusieurs approches, y compris le remplacement .texte avec .html comme décrit ici:https://github.com/mbostock/d3/wiki/Selections#wiki-htmlsans succès. J'ai aussi essayé en ajoutant le paragraphe éléments au lieu de cela fonctionne, mais le p les éléments sont positionnés au-dessous de la svg corps dans une liste avec aucun moyen évident de les déplacer dans la bonne position. Le code ci-dessus est la plus proche je suis arrivé à obtenir ce dont j'ai besoin, mais pour une raison que seule la première valeur de texte s'affiche. Cependant, je suis ouvert à toute approche en d3 qui fait le travail: 4 tonnes noms avec les bonnes valeurs en dessous de leur

source d'informationauteur user1452494

  1. 34

    Dans votre deuxième bloc de code, vous êtes seulement en ajoutant l'une text élément, donc un seul d'entre eux apparaissent. Ce que vous devez faire est d'ajouter le texte similaire à votre premier bloc, c'est à dire avec la .enter() de sélection. Pour cela, vous avez deux choix. Vous pouvez enregistrer et réutiliser les .enter() de sélection, ou d'attribuer des classes différentes pour les deux types de texte pour être en mesure de 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 en fonction de ce que vous voulez faire, la deuxième option peut être préférable, si vous souhaitez modifier le texte par la suite, il sera beaucoup plus facile si vous pouvez faire la distinction entre les deux types de texte. Vous pouvez également utiliser les différentes classes de donner différents styles CSS.