附加在D3中时不会出现元素

Question

我正在尝试创建一个显示颜色块的图例，与该颜色对应的名称，以及用于更改颜色的下拉列表。这是我的代码：

function create_legend(){
    var legend = legendSVG.selectAll("g.legend")
    .data(ext_color_domain)
    .enter().append("g")
    .attr("class", "legend");

    var ls_w = 20, ls_h = 20;

    //create color blocks
    legend.append("rect")
    .attr("x", 20)
    .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h;})
    .attr("width", ls_w)
    .attr("height", ls_h)
    .style("fill", function(d, i) { return color_scale[i]; })
    .style("opacity", 0.8);

    //create text
    legend.append("text")
    .attr("x", 50)
    .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
    .text(function(d, i){ return segment_map[i]; });

    //create dropdown for colors
    legend.append("div")
    .append("select")
    .attr("x", 80)
    .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
    .selectAll("option")
    .data(color_names)
    .enter().append("option")
    .attr("value", function (d) { return d; })
    .text(function (d) { return d; });      

}

颜色＆amp;文本出现，但下拉元素没有。

更新：好的，我尝试了以下操作，但它给出了错误“Uncaught SyntaxError：Unexpected token”

'//create dropdown for colors
    legend.append("foreignObject")
    .attr("class", ".dropdown")
    .append("div")
    .append("select")
    .attr("x", 80)
    .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
    .selectAll("option")
    .data(color_names)
    .enter().append("option")
    .attr("value", function (d) { return d; })
    .text(function (d) { return d; });'

Answer 1

在SVG中，html元素只能是foreignObject元素的子元素，而foreignObject元素不能是text元素的子元素。 foreignObject元素可以是文本元素的兄弟元素，因此您的DOM需要看起来像这样。

g
|-   rect
|-   text
|-   foreignObject
        |- div

Answer 2

对于外来对象，您应该添加如下元素： .append("xhtml:div")代替.append("div")

更正完整代码段。

 legend.append("foreignObject")
    .attr("class", ".dropdown")
    .append("xhtml:div")
    .append("xhtml:select")
    .attr("width", 80)

    .attr("x",function(d, i){ return width * i})
    .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4;})
    .selectAll("option")
     .data(color_names)
    .enter().append("xhtml:option")
    .attr("value", function (d) { return d; })
    .text(function (d) { return d; }