Question

我有一些d3动画我想附加到使用叠加层创建的自定义地图标记。由于我自定义了标记，因此它们有一个我可以定位的类，但它们附加到地图/覆盖而不是svg，因此我不确定如何选择它们。

以下是地图和自定义标记创建：

var map = new google.maps.Map(mapCanvas, mapOptions)
    overlay = new CustomMarker(
      myLatlng,
      map,
      {
        marker_id: '1'
      }
    );

这导致了一类标记。这是将svg元素追加到该标记的失败尝试：

svg.selectAll(".marker")
  .data(locationsArray)
  .enter()
  .append("circle")
  .attr("stroke-width", 20)
  .attr("r", 20)
  // .attr("cx", function(d) { return d[1] })//position of pulse on canvas
  // .attr("cy", function(d) { return d[0] })
  .attr("class", function(d) {
    if (d[3] >= 30 && d[3] < 60) {
      d[2] == 1 ? result = "smallBadVibe" :
      d[2] == 2 ? result = "smallNeutralVibe" : result = "smallGoodVibe";
      return result;
    }
    else if (d[3] >=60 && d[3] < 90) {
      d[2] == 1 ? result = "mediumBadVibe" :
      d[2] == 2 ? result = "mediumNeutralVibe" : result = "mediumGoodVibe";
      return result;
    }
    else if (d[3] >= 90) {
      d[2] == 1 ? result = "largeBadVibe" :
      d[2] == 2 ? result = "largeNeutralVibe" : result = "largeGoodVibe";
      return result;
    }
  })

我想也许我必须输入svg.select以外的东西，因为标记不在我的svg上但不知道输入什么。如果重要的是我正在申请的动画：

function cyanBigPulse() {
  var circle = svg.selectAll(".largeNeutralVibe");
  (function repeat() {
    circle = circle.transition()
      .attr("fill", "rgba(0,255,255, .35)")
      .attr("stroke", "rgba(0,255,255,1)")
      .duration(20)//circle close
      .attr("stroke-width", 0.5) //how thick is the stroke at min size
      .attr("r", 5) //inner circle radius
      .transition()
      .duration(2000)//circle open
      .attr('stroke-width', 0.5) //how thick is the stroke at full size
      .attr("r", 150) //circle outer radius
      .ease('sine')
      .each("end", repeat)
  })();
}

注意：我将把多个圆圈附加到地图上的不同位置，并将迭代一些数据以创建更多标记，但是现在我必须知道如何在应用它之前附加到那个标记。规模更大。在此先感谢您的帮助。

Answer 1

那么，您希望动画发生在自定义标记之上吗？

在涉及所有代码时遇到一些麻烦，但实质上你可以完成你想要将SVG（或多个SVG）附加到标记div中的内容：

var canvas = d3.select("#map-canvas");
setTimeout(function(){
   // find your "marker" and add the circle
   canvas
    .select(".marker")
    .append('svg')
    .attr('width', 50)
    .attr('height',50)
    .append('circle')
    .attr("fill", "orange")
    .attr("r", 20)
    .attr("cx", 25)
    .attr("cy", 25)
    .attr("class","smallGoodVibe");
    // kick off animations
    VYBZ();
, 500); // had to do it in a setTimeout to let the map API finish executing, perhaps this could move to a callback: http://stackoverflow.com/questions/832692/how-can-i-check-whether-google-maps-is-fully-loaded?

这是一个更新的example。

将自定义动画附加到d3中的自定义地图标记

1 个答案: