在锚标记中包装路径元素

时间:2016-07-06 19:47:04

标签: javascript jquery html d3.js

我正在努力制作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来在<a><path>元素周围添加<text>标记,但我无法执行.wrap()或更改使用它的代码:

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

我错过了什么?

2 个答案:

答案 0 :(得分:0)

您应该可以通过在apath元素前附加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);

请参阅https://jsfiddle.net/m4mj8u7L/1/

答案 1 :(得分:-2)

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