D3.js传单弹出窗口中的图形

Question

我正在尝试将 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);
}

Answer 1

想通了。关键是在声明div时摆脱jQuery的东西，在div中添加一个id，然后在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);
}