[英]Wrapping path elements in an anchor tag
我正在尝试使在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")
我想念什么?
您只需将a
元素附加在path
或text
元素之前,就能做到这一点:
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);
看来您正在尝试使用jQuery编辑SVG DOM元素。 如果是这样,我不久前就遇到了这个问题。 SVG元素与普通HTML元素的处理方式不同,因此许多jQuery函数不会影响它们。 但是,您可以使用一些替代语法来解决这些限制。 看看这个答案的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.