Гиперссылки в объектах 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, который это сделает?

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

  "children": [ { "name": "Google", "size": 3938, "url": "https://www.google.com" }, { "name": "Bing", "size": 3938, "url": "http://www.bing.com" } ]

Конечно, в вашем коде d3 вам необходимо append tags и установить xlink:href .

Вот некоторые html и d3-коды, которые могут вам помочь. Сначала вам нужно импортировать пространство имен 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 («щелчок», щелчок), поскольку это может помешать поведению SVG по умолчанию.

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

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