Question

我目前有一个svg图像标记，这是一个圆圈。直到这里一切都很好。

    var circle = svg.append("circle").attr("r",5).attr("cx",100).attr("cy",200).style("stroke","#FF0000");
    var circleBox = circle.node().getBBox();
    var widthMarker=100;
    var img = svg.append("svg:image")
        .attr("xlink:href", "marker.svg")
        .attr("width", widthMarker)
        .attr("height", widthMarker)
        .attr("x", circleBox.x + circleBox.width/2 - widthMarker/2)
        .attr("y",circleBox.y + circleBox.height/2 - widthMarker)

然后我会生成一些圆圈的动画，在这些圆圈中会增加它们的大小。

    function animation(){

      svg.selectAll('circle.emanting')
      .data([1])
      .enter()
      .append('circle')
        .attr('stroke', 'blue')
        .attr('fill', 'none')
        .attr('opacity', 1)
        .attr('stroke-width', 1)
          .attr('cx', 100)
          .attr('cy', 200)
          .attr('r',5)
        .transition()
          .ease("linear")
          .duration(5000)
          .style("stroke-opacity", 0)
          .attr('r',50)
          .remove();
    }
    setInterval(function(){
      animation();
    },1000)

问题是我想要的是我的圈子在标记之下，而且目前都在上面。

如何修复它以使圆圈的动画低于标记？我该如何解决？

http://plnkr.co/edit/v4RlP8CASpZNxU2NmIdo?p=preview

非常感谢

创建＆＃34; n＆＃34;不是一个好主意。次数。在我的真实代码中，我已经分配了点击，悬停和其他事件，并且每次都会创建它会妨碍我的功能

Answer 1

一种解决方案是将图像的追加添加到动画功能中：

 function animation(){

      svg.selectAll('circle.emanting')
      .data([1])
      .enter()
      .append('circle')
        .attr('stroke', 'blue')
        .attr('fill', 'none')
        .attr('opacity', 1)
        .attr('stroke-width', 1)
          .attr('cx', 100)
          .attr('cy', 200)
          .attr('r',5)
        .transition()
          .ease("linear")
          .duration(5000)
          .style("stroke-opacity", 0)
          .attr('r',50)
          .remove();

     var img = svg.append("svg:image")
     .attr("xlink:href", "marker.svg")
     .attr("width", widthMarker)
     .attr("height", widthMarker)
     .attr("x", circleBox.x + circleBox.width/2 - widthMarker/2)
     .attr("y",circleBox.y + circleBox.height/2 - widthMarker)
    }
    setInterval(function(){
      animation();
    },1000)

每次运行动画功能时，都会再次绘制蓝色圆圈。如果您只绘制一次标记，它将始终位于圆圈后面。通过将标记添加到动画功能中，您可以确保每次重绘时都将它放在圆圈的顶部。

Answer 2

这是你要找的吗？

http://plnkr.co/edit/r7GaM7f7qwAwTP9N7C0W?p=preview

我只是使用组<g>

来安排标记和圆圈

var circles = svg.append('g').classed('circles', true);
var marker = svg.append('g').classed('marker', true);
var img = marker.append("svg:image")

function animation(){

  circles.selectAll('circle.emanting')
  ....

这样，标记将始终位于圆圈的顶部。希望这会有所帮助。

如何在d3.js中将一个元素放在另一个元素下面

2 个答案: