CODEWITHSUNDEEP
d3.jsd3plus
user7394563
user7394563

Reputation: 43

D3plus hyperlink

I created a simple static network with D3plus. I want to have a working hyperlink in tooltip/legend which depends on the name of selected node? So if the node name is "Berlin" I want a link to "https://en.wikipedia.org/wiki/Berlin"

How to do that? Thanks

Upvotes: 1

Views: 358

Answers (1)

Dave Landry
Dave Landry

Reputation: 246

Using this example as a starting point for creating a large tooltip with clickable content, the "html" key can be passed a function which will get passed the id of the clicked data point:

var sample_data = [
  {"value": 100, "name": "Berlin"},
  {"value": 70,  "name": "London"},
  {"value": 40,  "name": "Paris"}
]

function htmlContent(id) {
  return "<a href='https://en.wikipedia.org/wiki/" + id + "'>Click Here</a>";
}

var visualization = d3plus.viz()
  .container("#viz")
  .data(sample_data)
  .id("name")
  .size("value")
  .tooltip({"html": htmlContent})
  .type("tree_map")
  .draw();
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>

<div id="viz"></div>

Upvotes: 1

Related Questions