要素が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; });  

} 

色&テキストが表示されますが、ドロップダウン要素にはありません。

更新：[OK]を、私は次の操作を実行しようとしたが、それは私にエラー「キャッチされないでSyntaxError：予期しないトークン」を与えるSVGで

'//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

html要素のみの子であることが可能にforeignObject要素とforeignObject要素は、テキスト要素の子にすることはできません。 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; }