javascript - d3: use anchor elements as chart labels -


i getting started d3 , svg haven't found clear on how add hyperlinks. here code have write labels left of bars in d3 bar chart. there sample somewhere convert these labels hyperlinks (say objects in rangedata had href , name/label property)? searched around bit haven't gotten further svg spec adding anchor element.

chart.selectall(".bar.barlabel")         .data(rangedata)       .enter().append("text")         .attr("class", "bar")         .attr("x", 0)         .attr("y", function (d, i) { return height(i) + barheight(y, i) / 2; })         .attr("dx", -20)         .attr("dy", ".35em")         .attr("text-anchor", "end")         .text(function (d) { return d.label; }); 

you can use a element achieve this, similar html itself. wrap content in a element , provide link target href attribute xlink namespace.

chart.selectall("a")     .data(rangedata)   .enter()     .append("a")     .attr("xlink:href", function(d) { return d.href; })     .append("text")     .text(function (d) { return d.label; }); 

alternatively, use foreignobject element directly embed html svg.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -