График d3.js во всплывающем окне - PullRequest
Новая
       6

График d3.js во всплывающем окне

0 голосов
/ 07 мая 2018

Я пытаюсь добавить граф d3.js во всплывающее окно листовки. Я посмотрел на этот ответ , и он, кажется, идет в правильном направлении, но по какой-то причине я получаю [object HTMLDivElement] вместо фактического содержимого div. Есть идеи?

Вот мой код для всплывающего окна (сейчас я только пытаюсь добавить круг): 

function showPopup(latlng, name, comuna, estrato1, estrato2, estrato3, estrato4, estrato5, estrato6) {
  var div = $('<div style="width: 200px; height: 200px;"></svg></div>')[0];
  var svg = d3.select(div).select("svg")
    .attr("width", 200)
    .attr("height", 200);
  svg.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 100)
    .attr("cx", 100)
    .attr("cy", 100);
  popup
  .setLatLng(latlng)
  .setContent('<b>' + name.toUpperCase() + '</b><p>' + comuna.toUpperCase() + '</p><p class="estratos">Estrato 1: ' + Math.round(estrato1 * 100) + '%<br>Estrato 2: ' + Math.round(estrato2 * 100) +'%<br>Estrato 3: ' + Math.round(estrato3 * 100) +'%<br>Estrato 4: ' + Math.round(estrato4 * 100) +'%<br>Estrato 5: ' + Math.round(estrato5 * 100) +'%<br>Estrato 6: ' + Math.round(estrato6 * 100) +'%</p>' + div)
  .openOn(mymap);
}

1 Ответ

0 голосов
/ 08 мая 2018

Разобрался. Ключ был в том, чтобы избавиться от jQuery, когда объявляли div, добавляли id к div и затем помещали часть d3 после вставки div во всплывающее окно. Вот пересмотренный код: 

function showPopup(latlng, name, comuna, estrato1, estrato2, estrato3, estrato4, estrato5, estrato6) {
  var div = '<div style="width: 200px; height: 200px;" id="graphDiv"></svg></div>';
  popup
    .setLatLng(latlng)
    .setContent('<b>' + name.toUpperCase() + '</b><p>' + comuna.toUpperCase() + '</p><p class="estratos">Estrato 1: ' + Math.round(estrato1 * 100) + '%<br>Estrato 2: ' + Math.round(estrato2 * 100) +'%<br>Estrato 3: ' + Math.round(estrato3 * 100) +'%<br>Estrato 4: ' + Math.round(estrato4 * 100) +'%<br>Estrato 5: ' + Math.round(estrato5 * 100) +'%<br>Estrato 6: ' + Math.round(estrato6 * 100) +'%</p>' + div)
    .openOn(mymap);
  var svg = d3.select("#graphDiv").append("svg")
    .attr("width", 200)
    .attr("height", 200);
  svg.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 100)
    .attr("cx", 100)
    .attr("cy", 100);
}
...