рисовать пути, используя d3 в оверлеях Google Maps

Я использую d3.js с картами Google в тщетной попытке визуализировать беспроводное покрытие. основная идея состоит в том, что каждая точка на карте будет представлять точку доступа, и я буду использовать диаграмму вороного из этих точек в качестве приблизительного приближения покрытия и т. д.

так на основании этогодемонстрацияу меня есть следующее:



  
    
    
    
    
    

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations {
  position: absolute;
}

.stations, .stations svg {
  position: absolute;
}

.stations border {
  position: absolute;
 stroke: black;
 stroke-width: 2px;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

    
  
  
    
    

// create map
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});


var data = [
{ name: 'pt1', lng: -122.28, lat: 38.2 },
{ name: 'pt2', lng: -122.05, lat: 38.0 },
{ name: 'pt3', lng: -122.12, lat: 37.67 },
{ name: 'pt4', lng: -121.82, lat: 37.7 },
{ name: 'pt5', lng: -121.95, lat: 38.38 },
{ name: 'pt6', lng: -121.78, lat: 36.93 },
{ name: 'pt7', lng: -122.25, lat: 37.52 },
{ name: 'pt8', lng: -122.82, lat: 38.5 },
{ name: 'pt9', lng: -121.92, lat: 37.37 },
{ name: 'pt10', lng: -122.37, lat: 37.62 },
{ name: 'pt11', lng: -121.23, lat: 37.9 },
]


// Load the station data. When the data comes back, create an overlay.
var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
  var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("height", "100%")
        .attr("width", "100%")
        .attr("class", "stations")

  // Draw each marker as a separate SVG element.
  // We could use a single SVG, but what size would it have?
  overlay.draw = function() {
    var projection = this.getProjection(),
        padding = 10;

    var marker = layer.selectAll("svg")
        .data( data )
        .each(transform) // update existing markers
      .enter().append("svg:svg")
        .each(transform)
        .attr("class", "marker")

    marker.append("svg:circle")
        .attr("r", 4.5)
        .attr("cx", padding )
        .attr("cy", padding );

    // add a label.
    marker.append("svg:text")
        .attr("x", padding + 7)
        .attr("y", padding)
        .attr("dy", ".31em")
        .text( function(d) { 
          return d.name; }
        );

    var v = d3.geom.voronoi( translate(data) );
    // console.log( v )

    var edges = layer.selectAll("path")
        .data( v )
      .enter().append("svg:svg")
        .attr( "class", "border" )
        .append("svg:path")
        .attr( "d", function(d){
          var e = transform_path(d)
          var p = 'M' + e.join('L') + 'Z'
          console.log( 'PATH: ' + p)
          return p
        })

    function translate(data) {
      var d = []
      for( var i=0; i

Ответы на вопрос(1)

Решение Вопроса

появляющиеся. Ваша проблема была связана не с D3, а с плохим стилем CSS: ширина была установлена в 0px, стили для кругов были заданы путям и т. Д.

http://jsfiddle.net/uF9PV/7/

Я также заметил недостатки дизайна: ваши точки должны позиционироваться не с помощью CSS с помощью абсолютного позиционирования, а с помощью позиционирования SVG (пусть D3 решит проблему за вас). Мой совет - четко отделить оверлей и карту Google. Сложнее было бы убедиться, что они движутся вместе (увеличение и уменьшение влево-вправо)

good luck
 yee37930 окт. 2012 г., 00:49
я исправил проблему увеличения и уменьшения масштаба: я забыл добавить .attr ("d", function () {...}) для обновления существующих записей после .data (). еще раз спасибо!
 yee37929 окт. 2012 г., 21:33
Спасибо! да, слишком много слоев ... я использовал CSS для позиционирования маркера, потому что это было предоставлено в примере наgist.github.com/899711, я думаю, что он был использован, так как он автоматически изменяет размеры и перемещается с панелью Google OverlayLayer. например, с вашей скрипкой, масштабирование / панорамирование нене работает для слоя вороной (не• правильное увеличение / положение), пока маркеры остаются правильными.

Ваш ответ на вопрос