如何在d3.js中將一個元素放在另一個元素下

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

非常感謝你

創建“ n”次不是一個好主意。 同樣在我的代碼中，我為標記分配了單擊，懸停和其他事件，並且每次都創建它會妨礙我的功能

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')
  ....

這樣，標記將始終位於圓圈的頂部。 希望這可以幫助。