Question

我正在尝试在d3.js中的div中放置一个select选项，但我不能，这是我正在使用的代码：

var vis = d3.select(".dashboard")
            .select("#sowing")
            .append("div")
            .append("svg")
            .attr("id", "chartID")
            .attr("class", "boxing")
            .attr("preserveAspectRatio", "xMinYMin meet")
            .attr("viewBox", "0 0 540 250")
            .append("g")
            .attr("transform", "translate(" + 550 / 2 + "," + 300 / 2 + ")");


       var select = vis.append('select')
                .attr("name", "dept-list")
                .attr("class", "form-control");

            var options = select
                .selectAll('option')
                .data(data)
                .enter()
                .append('option')
                .text(function(d) {
                    return d.text;
                })
                .attr("value", function(d) {
                    return d.id;
                });

在此JSFIDDLE中显示代码以查看我想要的内容

谢谢！

Answer 1

解释很简单：无法追加HTML元素（无论是<div>，<h1>，<p>，<select>等。 ..）到SVG。它会在您检查DOM时显示，但在实际的SVG中不会呈现任何内容。

这里最好的解决方案是：不要将HTML元素附加到SVG。

但是，如果（无论出于什么原因）你真的需要在SVG中创建这个下拉列表，你可以使用foreignObject。它不是一个好的解决方案，它不适用于IE。不过，如果你想这样做，试试这个：

var foreign = vis.append("foreignObject")
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:body");

var select = foreign.append('select')
    .attr("name", "dept-list")
    .attr("class", "form-control");

这是您更新的小提琴：https://jsfiddle.net/ntxoyhoz/

在div d3.js中显示选择选项

1 个答案: