Гиперссылки в объектах d3.js

Я полный новичок в d3.js или java в целом. Я использую пример с отступом дерева из http://bl.ocks.org/1093025. Мне потребовалось два часа, чтобы заставить это работать на моем локальном компьютере, чтобы дать вам представление о моем уровне мастерства.

Я открыл файл flare.json и начал возиться с ним и смог успешно его обработать. Похоже на это

{
    "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
                }
            ]
        }
    ]
}

Что я хочу сделать сейчас, это попытаться добавить гиперссылки. Например, я хочу, чтобы можно было нажать "CNN" и перейти на CNN.com. Есть ли модификация, которую я могу сделать для flare.json, который это сделает?

Ответы

Ответ 1

Это довольно просто, просто добавьте еще несколько "ключей": пары "значение". Пример:

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

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

            }
        ]

Конечно, в вашем коде d3 вам нужно использовать теги append <svg:a> и установить их атрибут xlink:href.

Вот некоторые html и d3-коды, которые могут вам помочь. Сначала вам нужно импортировать пространство имен xlink в свой html файл:

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

Затем в коде чертежа d3, в котором вы добавляете узлы для каждого элемента данных, вы обертываете элемент, который должен быть кликабельными ссылками, с тегом svg:a:

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

Возможно, вы захотите удалить обработчик кликов (который присутствует в исходном примере), удалив .on("click", щелчок), поскольку это может помешать поведению SVG по умолчанию.

Нажав на rect, вы должны перейти к соответствующему url. Ссылки SVG могут быть не полностью реализованы во всех браузерах.

В качестве альтернативы вы можете изменить обработчик click, чтобы прочитать URL-адрес из d.url, и использовать его для ручной переадресации браузера на этот URL через JavaScript: window.location = d.url;. Тогда вам не нужен тег svg:a и код xlink. Хотя добавление реальной ссылки (а не сценария) имеет преимущество, которое пользователь/браузер может решить, что делать (например, открыть на новой вкладке/странице). Это также помогает, если некоторые из ваших пользователей отключены JavaScript.