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?

Answer 1

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/

Answer 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.