Hipervínculos en objetos d3.js

Soy un novato completo en d3.js o java en general. Estoy usando el ejemplo de árbol sangrado de http://bl.ocks.org/1093025 . Me llevó dos horas hacerlo funcionar en mi computadora local, así que eso te dará una idea de mi nivel de habilidad.

Abrí el archivo flare.json y comencé a jugar con él y pude manipularlo con éxito. Se parece a esto

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

Lo que quiero hacer ahora es intentar agregar hipervínculos. Por ejemplo, quiero poder hacer clic en “CNN” y acceder a CNN.com. ¿Hay alguna modificación que pueda hacer para flare.json que haga eso?

Es bastante fácil, simplemente agregue algunos pares más “clave”: “valor”. Ejemplo:

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

Por supuesto, en su código d3, deberá append tags y establecer su atributo xlink:href .

Aquí hay algunos códigos html y d3 que podrían serle útiles. Primero necesita importar el espacio de nombres xlink en su archivo html:

  ...  

Luego, en el código de dibujo d3 donde anexa nodos para cada elemento de datos, ajusta el elemento en el que desea que se pueda hacer clic en los enlaces con svg:a etiqueta 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 

Es posible que desee eliminar el controlador de clics (que está presente en el ejemplo original) eliminando el .on ("clic", clic) ya que podría interferir con el comportamiento predeterminado de los enlaces SVG.

Al hacer clic en su rect ahora debería rect a la url apropiada. Los enlaces SVG pueden no implementarse completamente en todos los navegadores.

De forma alternativa, podría modificar el manejador de click para leer la URL de d.url y usarla para redirigir manualmente el navegador a esa URL a través de JavaScript: window.location = d.url; . Entonces no necesitas la etiqueta svg:a y el código xlink . Aunque agregar un enlace real (no uno con guión) tiene la ventaja de que el usuario / navegador puede decidir qué hacer (por ejemplo, abrir en una nueva pestaña / página). También ayuda si algunos de sus usuarios tienen JavaScript desactivado.