Добавление пользовательской анимации в пользовательский маркер карты в d3

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 (или SVGs, если более одного) в маркер 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 ,