Javascript d3-无法将选择/选项下拉列表添加到svg-g元素

我打算在SVG中添加一个圆圈包、收音机和下拉菜单，并在它们之间切换（在同一个SVG上）

我无法将选择/选项下拉菜单添加到以600/600的宽度/高度创建的SVG中。在元素控制台中，我可以看到

g

-元素和下拉选择选项。 但是在屏幕上，

g#菜单

的大小是0x0？为什么会这样？有指针/输入吗

注意：这里我尝试使用D3.js动态添加下拉菜单，而不是在body元素中硬编码selectio/option或div。我这样做是为了在不同的视图之间切换

var svg1 = d3.select("body")
            .append("svg")
            .attr("width", 600)
            .attr("height", 600)
            .append("g")
            .attr("transform", 
              "translate(0,0)"));  
var buttonNames = ["button 1", "button 2", "button 3", "button 4"];
var menug = svg1.append("g")
                .attr("id","menug")
                .attr("transform","translate(60,60)");

var menu = d3.select("#menug")
             .append("select")
             .attr("id", "menu");                    


menu.selectAll("option")
        .data(buttonNames)
    .enter().append("option")
        .text(function(d){return d;});

---

这个问题非常常见，我在文档中创建了这个示例。该示例处理错误地附加到SVG的SVG元素，但同样的推理也适用于附加到SVG的HTML元素：您必须知道哪些元素可以有子元素以及它们可以有哪些类型的子元素。更多的细节在这篇文章的底部

简而言之：不能将任何HTML元素附加到SVG（除非使用foreignObject）。该元素将显示在控制台中，但不起作用

注意：我在回答你的书面问题，而忽略你的代码，因为，有趣的是，在你的代码中，你正确地将HTML元素附加到

正文中


正确追加SVG元素

这是一个相对常见的错误：例如，在条形图中创建了一个
rect
元素，并希望添加一个文本标签（比如，该条形图的值）。因此，使用与附加
rect
并定义其
x
和
y
位置相同的变量，可以附加
文本
元素。你可能会认为这很合乎逻辑。但这是行不通的

这个错误是如何发生的？

让我们看一个具体的例子，一个创建条形图（）的非常基本的代码：

这给了我们这个结果：

<svg>
    <crazyTag></crazyTag>
</svg>


但是您需要添加一些文本元素，可能是每个栏的一个简单值。所以，你要这样做：

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

瞧，什么也没发生！如果你怀疑的话

“但我看到了标签！”

如果您检查最后一段代码创建的SVG，您将看到：


在这一点上，很多人说：“但是我看到了文本标签，它是附加的！”。是的，但这并不意味着它会起作用。你可以附加任何东西！例如，请参见：

svg.append("crazyTag");

它将为您提供以下结果：

<svg>
    <crazyTag></crazyTag>
</svg>

这就是结果：


而且。
这个问题非常常见，我在文档中创建了这个示例。该示例处理错误地附加到SVG的SVG元素，但同样的推理也适用于附加到SVG的HTML元素：您必须知道哪些元素可以有子元素以及它们可以有哪些类型的子元素。更多的细节在这篇文章的底部

简而言之：不能将任何HTML元素附加到SVG（除非使用foreignObject）。该元素将显示在控制台中，但不起作用

注意：我在回答你的书面问题，而忽略你的代码，因为，有趣的是，在你的代码中，你正确地将HTML元素附加到
正文中


正确追加SVG元素

这是一个相对常见的错误：例如，在条形图中创建了一个
rect
元素，并希望添加一个文本标签（比如，该条形图的值）。因此，使用与附加
rect
并定义其
x
和
y
位置相同的变量，可以附加
文本
元素。你可能会认为这很合乎逻辑。但这是行不通的

这个错误是如何发生的？

让我们看一个具体的例子，一个创建条形图（）的非常基本的代码：

这给了我们这个结果：

<svg>
    <crazyTag></crazyTag>
</svg>


但是您需要添加一些文本元素，可能是每个栏的一个简单值。所以，你要这样做：

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

瞧，什么也没发生！如果你怀疑的话

“但我看到了标签！”

如果您检查最后一段代码创建的SVG，您将看到：


在这一点上，很多人说：“但是我看到了文本标签，它是附加的！”。是的，但这并不意味着它会起作用。你可以附加任何东西！例如，请参见：

svg.append("crazyTag");

它将为您提供以下结果：

<svg>
    <crazyTag></crazyTag>
</svg>

这就是结果：


还有。
试试这个


var buttonNames=[“按钮1”、“按钮2”、“按钮3”、“按钮4”]；
var l=4；
对于（i=0；i试试这个


var buttonNames=[“按钮1”、“按钮2”、“按钮3”、“按钮4”]；
var l=4；
对于（i=0；iI写了一个答案，但我删除了它，因为我感到困惑：在您的文本中，您说您将select附加到SVG，但在您的代码中，您将其附加到正文。哪一个是正确的？另外，在您的问题中，您指的是
g#menu
，尽管在您的代码片段中，id
menu
被分配给
select
这里出了问题。好吧，@gayathri，我取消了我的答案。如果你要将其附加到SVG，请看一看。如果你要将其附加到正文，请忽略我的答案。我写了一个答案，但我删除了它，因为我很困惑：在你的文本中，你说你要将select附加到SVG，但在你的代码中，你要将其附加到正文。哪一个是正确的另外，在你的问题中，你提到了
g#menu
，尽管在你的代码片段中，id
menu
被分配给了
select
。这里有点不对劲。好了，@gayathri，我取消了我的答案。如果你要将它附加到SVG中，请看一看。如果你要将它附加到正文中，请忽略我的答案。谢谢@Gerado。对不起，abt这个mis接受代码。我真的试图将下拉列表添加到svg中，而不是主体（是的，将其添加到主体中是直接的fwd，可以工作）。因此，这非常有用，不是所有HTML元素都可以