Javascript 引导下拉列表在svg中不起作用？

}

我试图在svg中添加一个引导的下拉菜单，但我不知道为什么它不起作用。启动按钮会出现，但当我单击按钮时，什么也没有发生。甚至可以让它在svg中工作吗？还是我应该在外面做

---

更新-为不清楚的问题道歉。this.refs.container引用的是react的dom节点。svg本身没有问题，因为我看到svg中的所有内容以及下拉按钮。也可以忽略变换。正如@Shashank给出的示例所示，它确实有效，但我想知道为什么它在我的应用程序上不起作用，尽管代码是相同的。以下是与此问题相关的附加代码。

我再次为给您带来的困惑道歉。我刚刚发现我没有导入引导js文件

它应该会起作用。这里有一个叉子：确保您正确地包含了BS文件。另外，就我个人而言，我不会使用这个方法，而是绝对定位一个div并使用jQuery事件。@Shashank，您的示例没有忠实地再现问题的内容。您正在添加一个元素，但没有调整大小说明，然后省略了的transform属性。如果添加了该选项，则该按钮将被移动到视口之外，并且不可见。但无法确定这是否是真正的问题，因为问题并没有说明用这个.refs.container选择了什么。@ccprog同意这个问题并不完全清楚。但是看这一部分，启动按钮出现了，但是当我单击按钮并回答OP的第一个问题（如果可以在SVG中工作）时，什么也没有发生，我假设按钮是可见的，因此上传了一个fork，显示它在SVG中工作。顺便说一句，谢谢。对不清楚的问题表示歉意。this.refs.container引用的是react的dom节点。svg本身没有问题，因为我看到svg中的所有内容以及下拉按钮。也可以忽略变换。正如@Shashank给出的示例所示，它确实有效，但我想知道为什么它在我的应用程序上不起作用，尽管代码是相同的。我用完整的代码编辑了我的问题。

... code omitted
import 'bootstrap/dist/css/bootstrap.min.css';

const margin = { top: 200, right: 55, bottom: 100, left: 180};
const width = 1250 - margin.left - margin.right;
const height = 800 - margin.top - margin.bottom;


class Graphics extends Component {

constructor(props) {
    super(props);

}


componentDidMount() {

    this.svg = d3.select(this.refs.container)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr( "transform", "translate(" + margin.left + "," + margin.top + ")");
    this.renderOptions();
}



componentDidUpdate(){

    this.renderOptions();
}


renderOptions(){

     const keys = ["cozy","luxury","loud","modern"];

     const container = d3.select(this.refs.container)
     .append('g')
         .attr('transform','translate(100,100)')
     .append('foreignObject')
         .attr('width','200px')
         .attr('height','200px')
     .append('xhtml:div')
         .attr('class','dropdown');

     container.append('xhtml:button')
         .attr('class','btn btn-primary dropdown-toggle')
         .attr('id','dropdownMenuButton')
         .attr('type','button')
         .attr('data-toggle','dropdown')
         .html('Select mood')
     .append('xhtml:span')
         .attr('class','caret')

     container.append('xhtml:div')
         .attr('class','dropdown-menu')
         .attr('aria-labelledby','dropdownMenuButton')
     .selectAll('option')
         .data(keys)
         .enter()
     .append('xhtml:a')
         .attr('class','dropdown-item')
         .html( d => d )

   }

render() {

    return (
        <main>

            <svg ref="container">
            </svg>

        </main>
    )
}