web-dev-qa-db-fra.com

Hyperliens dans les objets d3.js

Je suis un novice complet chez d3.js ou Java en général. J'utilise l'exemple d'arbre en retrait de http://bl.ocks.org/1093025 . Il m'a fallu deux heures pour que cela fonctionne sur mon ordinateur local, ce qui devrait vous donner une idée de mon niveau de compétence.

J'ai ouvert le fichier flare.json et j'ai commencé à jouer avec lui et j'ai pu le manipuler avec succès. Ça ressemble à ça

{
    "name": "Test D3",
    "children": [
        {
            "name": "News",
            "children": [
                {
                    "name": "CNN",
                    "size": 1000
                },
                {
                    "name": "BBC",
                    "size": 3812
                }
            ]
        },
        {
            "name": "Blogs",
            "children": [
                {
                    "name": "Engaget",
                    "size": 3938
                }
            ]
        },
        {
            "name": "Search",
            "children": [
                {
                    "name": "Google",
                    "size": 3938
                },
                {
                    "name": "Bing",
                    "size": 3938
                }
            ]
        }
    ]
}

Ce que je veux faire maintenant, c'est essayer d'ajouter des hyperliens. Par exemple, je veux pouvoir cliquer sur "CNN" et aller sur CNN.com. Puis-je apporter une modification à flare.json qui fera cela?

d3.js
36
Mr. Fegur

C'est assez simple, il suffit d'ajouter quelques paires "clé": "valeur". Exemple:

        "children": [
            {
                "name": "Google",
                "size": 3938,
                "url":  "https://www.google.com"

            },
            {
                "name": "Bing",
                "size": 3938,
                "url":  "http://www.bing.com"

            }
        ]

Bien sûr, dans votre code d3, vous devez alors append<svg:a> tags et définissez leur xlink:href attribut.

Voici quelques codes html et d3 qui pourraient vous être utiles. Vous devez d'abord importer l'espace de noms xlink dans votre fichier html:

<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>

Ensuite, dans le code de dessin d3 où vous ajoutez des nœuds pour chaque élément de données, vous encapsulez l'élément que vous souhaitez être des liens cliquables avec un svg:a tag:

nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property
.append("svg:rect")
  .attr("y", -barHeight / 2)
  .attr("height", barHeight)
  .attr("width", barWidth)
  .style("fill", color)
  .on("click", click);  // <- remove this if you like

Vous souhaiterez peut-être supprimer le gestionnaire de clics (qui est présent dans l'exemple d'origine) en supprimant le .on ("clic", clic) car il pourrait interférer avec le comportement par défaut des liens SVG.

Cliquer sur vos rects devrait maintenant vous conduire au url approprié. Les liens SVG peuvent ne pas être entièrement implémentés dans tous les navigateurs.

Vous pouvez également modifier le gestionnaire click pour lire l'URL à partir de d.url et utilisez celui-ci pour rediriger manuellement le navigateur vers cette URL via JavaScript: window.location = d.url;. Vous n'avez alors pas besoin du svg:a tag et le code xlink. Bien que l'ajout d'un lien réel (pas un lien scripté) ait l'avantage que l'utilisateur/navigateur peut décider quoi faire (par exemple, ouvrir dans un nouvel onglet/page). Cela aide également si certains de vos utilisateurs ont désactivé JavaScript.

58
Juve