Hyperlinks in d3.js objects

by

It is quite easy, just add some more “key” : “value” pairs. Example:

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

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

            }
        ]

Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.

Here is some html and d3-code that might be of help to you. First you need to import the xlink namespace in your html file:

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

Then in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an 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

You might want to remove the click handler (which is present in the original example) by deleting the .on(“click”, click) as it might interfere with the default behavior of SVG links.

Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.

Alternatively you could modify the click handler to read the URL from d.url and use that one to manually redirect the browser to that URL via JavaScript: window.location = d.url;. Then you do not need the svg:a tag and the xlink code. Though adding a real link (not a scripted one) has the benefit that the user/browser can decide what to do (e.g., open in new tab/page). It also helps if some of your users have JavaScript disabled.

More Related Contents:

  1. Center a map in d3 given a geoJSON object
  2. dc.js – Listening for chart group render
  3. D3js: Automatic labels placement to avoid overlaps? (force repulsion)
  4. Styles in component for D3.js do not show in angular 2
  5. How to create SVG elements of different types based on data?
  6. d3 importing csv file to array [duplicate]
  7. Loading D3.js data from a simple JSON string
  8. Drawing Multiple Lines in D3.js
  9. Calm down initial tick of a force layout
  10. d3.js v5 – Promise.all replaced d3.queue
  11. D3: update data with multiple elements in a group
  12. Tree drawing orientation
  13. D3.zoom jumps when using mouse wheel after programmatically zoom
  14. Loading external csv file in jsfiddle
  15. D3 force directed layout with bounding box
  16. d3.js v4: How to access parent group’s datum index?
  17. How to update axis using d3.js
  18. Change the ticks on x-axis
  19. d3: make the d3.csv function syncronous
  20. Pre-projected geometry v getting the browser to do it (aka efficiency v flexibility)
  21. responsive D3 chart
  22. How to use d3.min and d3.max within a d3.json command
  23. Bar chart with negative values
  24. How to make localization on months / days for D3js?
  25. D3 force layout fix root node at the center
  26. Major and minor ticks with V3 of D3?
  27. Converting EPSG projection bounds to a D3.js map
  28. Join existing elements of the DOM to data with d3.js
  29. D3.js loading local data file from file:///
  30. D3 Bar Graph example not working locally

Leave a Comment