我正在尝试制作 <text>
和 <path>
我在 d3 中可以单击的圆环图中的元素,但遇到了一些问题。这是我正在使用的代码:
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; })
我可以添加 <a>
在 <path>
周围标记和 <text>
通过直接在开发工具中编辑 DOM 来编辑元素,但我不能做 .wrap()
或者更改代码以使用它:
.append("a").attr("href", "http://wwww.gooogle.com")
我错过了什么?
最佳答案
您应该能够通过在 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);
关于javascript - 在 anchor 标记中包装路径元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38232549/