Wrapping path elements in an anchor tag

Question

I am trying to make the <text> and <path> elements in a donut chart I have in d3 clickable, but am running into some issues. Here is the code I am using:

        var g = svg.append('g')
            .attr('transform', 'translate(' + width / 2 + ',' + ((height / 2)) + ')');

        var arcs = g.selectAll('path');            

        arcs = arcs.data(pie(formattedData));
        arcs.exit().remove();
        arcs.enter().append('path')
            .style('stroke', 'white')
            .attr('fill', function (d, i) { return color(i) });
        arcs.attr('d', arc);

        arcs.append("text")
            .attr("transform", function (d) { return "translate(" + labelArc.centroid(d) + ")"; })
            .attr("dy", "0em")
            .attr("style", "font-size: 1.5em;")
            .attr("fill", "white")
            .text(function (d) { return d.value; })

I can add the <a> tag around the <path> and <text> elements by editing the DOM directly in dev tools, but I can't do a .wrap() or change the code to use this either:

.append("a").attr("href", "http://wwww.gooogle.com")

What am I missing?

I'd like to use d3 so I can access the data and change the href accordingly for each item. — awh112, Jul 06 '16 at 20:16
this answer might have what you're looking for: http://stackoverflow.com/questions/13104681/hyperlinks-in-d3-js-objects — Seemant Kulleen, Jul 07 '16 at 10:01

score 0 · Answer 1 · answered Jul 06 '16 at 20:18

0

You should be able to do this just by appending the a element before the path or text element:

arcs.enter()
  .append('a')
    .attr('href', 'http://www.google.com')
  .append('path')
    .style('stroke', 'white')
    .attr('fill', function (d, i) { return color(i) })
    .attr('d', arc);

See https://jsfiddle.net/m4mj8u7L/1/

answered Jul 06 '16 at 20:18

nrabinowitz

55,314
10
149
165

I thought the same thing, but for whatever reason when I try and do that the `d` attribute gets set to the anchor tag itself. I'll have to keep looking into it. I appreciate the response and am glad to know I wasn't crazy for expecting that to work! – awh112 Jul 07 '16 at 17:41
See my snippet - you have `arcs.attr('d', arc);`. Assign the `d` value in the entry selection instead. – nrabinowitz Jul 07 '16 at 17:57

score -2 · Answer 2 · edited May 23 '17 at 11:52

-2

It looks like you're trying to edit SVG DOM elements with jQuery. If so, I ran into this problem myself not long ago. SVG elements aren't treated the same as normal HTML elements, and thus many of the jQuery functions won't affect them. There's some alternate syntax that you can use to work around the limitations though. Look at this answer for some direction.

edited May 23 '17 at 11:52

Community

1
1

answered Jul 06 '16 at 20:04

Chris Patty

189
1
3
12

Wrapping path elements in an anchor tag

2 Answers2