在d3.js中执行转换后，SVG链接无法正常工作

Question

在执行任何排序/转换之前，附加到每个元素的链接完美地工作。下面是链接附加到rect元素的代码。

var rect = svg.selectAll("rect")
               .data(data)
               .enter()
               .append("svg:a")
               .attr("xlink:href", function(d){ return d.url })
               .attr("target", "_blank")
               .append("svg:rect")
               ......

但是，执行下面的排序功能/转换代码后，上面附加的超链接将不再起作用。我尝试再次append <a>属性，如上面的代码所示，但它不起作用..

var sortSquares2 = function() {
    svg.selectAll("rect")
         .sort(function(a, b){ return a.order - b.order; })
         .transition()
         .duration(1200)
         ........
         }

Answer 1

问题是您选择了rect元素，但附加了a个元素。您的转换只选择rect元素，而不选择a元素并对其进行操作。

要修复，请选择并添加相同的内容。在这种情况下，您可能需要最高级别的元素（即a）。