1
votes

Comment analyser un tableau d'objets à l'aide de la méthode de données de d3js et l'afficher dans l'info-bulle?

J'essaie d'implémenter l'info-bulle au survol d'un nœud particulier dans le graphe dirigé par la force en utilisant d3 js.

Comportement actuel: l'info-bulle est en cours de chargement mais le texte ne s'affiche pas correctement, il montre [objet objet ] au lieu d'un message texte approprié.

Résultat attendu: l'info-bulle doit afficher le texte dans le format ci-dessous:

function showToolTip(selectedNode) {
  var itemDetails = [
            {'Item': selectedNode.name},
            {'Item Id': selectedNode.id},
            {'status': 'Normal'},
            {'Supplier': 'Supplier1'},
        ];
        tooltip.transition().duration(200).style('visibility', 'visible')
            .style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
        tooltip.selectAll('div').data(itemDetails).enter().append('div').text(function (d, i) { return d; });
  }

function hideTooltip() {
 tooltip.selectAll('*').remove();
        tooltip.transition().duration(500).style('visibility', 'hidden');
}

Comment y parvenir?

Violon fonctionnel: Info-bulle

Item Name: 'Item1',
Item Id: 'Item1',
Supplier: 'Supplier1'

javascript d3.js d3-force-directed

0 commentaires

3 Réponses :

1
votes

La donnée de chaque

  est un objet, et vous essayez de transmettre l'objet entier à la méthode  text () , d'où le résultat que vous '  La meilleure idée est de traiter l'objet dans la méthode  text () , en spécifiant exactement ce que vous voulez afficher (clés et valeurs), et comment. En attendant, une solution très simple et naïve est la suivante: 
 .text(function (d, i) { 
    return Object.entries(d)[0].join(": ");
});
  Voici le JSFiddle fourchu:  https://jsfiddle.net/ou85b3n1/

0 commentaires

0
votes

Vous pouvez faire:

return d

Au lieu de:

return `${Object.keys(d)[0]}: ${d[Object.keys(d)[0]]}`

Dans votre fonction showToolTip p >

Vous obtenez cette erreur (qui est un comportement attendu) car vous renvoyez l'objet complet au lieu d'une chaîne.

Fiddle

0 commentaires

0
votes

  function showToolTip(selectedNode) {
        tooltip.transition().duration(200).style('visibility', 'visible')
            .style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
        tooltip.append('div').text(`Item: ${selectedNode.name}`);
        tooltip.append('div').text(`Item Id: ${selectedNode.id}`);
        tooltip.append('div').text(`Status: Normal`);
        tooltip.append('div').text(`Supplier: Supplier1`);
  }
https://jsfiddle.net/nh4fdw03/1/

0 commentaires