Question

我试图将d3.js图添加到传单弹出窗口中。我查看了this answer，它似乎是朝着正确的方向但由于某种原因我得到了[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);
}

Answer 1

想出来。关键在于在声明div时删除jQuery内容，向id添加div，然后在插入div后放入d3部分弹出窗口。这是修改后的代码：

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);
}

小册子弹出窗口中的d3.js图形

1 个答案: