在锚标记中包装路径元素答案

【问题标题】：Wrapping path elements in an anchor tag在锚标记中包装路径元素
【发布时间】：2016-07-06 19:47:04
【问题描述】：

我正在尝试使我在 d3 中的圆环图中的 <text> 和 <path> 元素可点击，但遇到了一些问题。这是我正在使用的代码：

        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; })

我可以通过直接在开发工具中编辑 DOM 来在 <path> 和 <text> 元素周围添加 <a> 标签，但我不能做 .wrap() 或更改代码以使用它：

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

我错过了什么？

【问题讨论】：

你是想用 d3 还是 jQuery 来修改图表？
我想使用 d3，这样我就可以访问数据并相应地更改每个项目的 href。
这个答案可能有你要找的东西：stackoverflow.com/questions/13104681/…

标签： javascript jquery html d3.js

【解决方案1】：

您应该能够通过在path 或text 元素之前附加a 元素来做到这一点：

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);

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

【讨论】：

我也有同样的想法，但无论出于何种原因，当我尝试这样做时，d 属性被设置为锚标记本身。我将不得不继续调查它。感谢您的回复，并且很高兴知道我并没有因为期望它起作用而疯狂！
看我的 sn-p - 你有arcs.attr('d', arc);。而是在条目选择中分配 d 值。

【解决方案2】：

您似乎正在尝试使用 jQuery 编辑 SVG DOM 元素。如果是这样，我不久前自己也遇到了这个问题。 SVG 元素的处理方式与普通 HTML 元素不同，因此许多 jQuery 函数不会影响它们。不过，您可以使用一些替代语法来解决这些限制。查看this answer 以获得一些方向。

【讨论】：