выпадающий список начальной загрузки не работает внутри SVG?

Question

... 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>
    )
}

}

Я пытаюсь добавить выпадающее меню начальной загрузки в svg, но я не уверен, почему это не работает. Кнопка загрузчика появляется, но ничего не происходит, когда я нажимаю кнопку. Можно ли вообще заставить его работать в SVG? или я должен просто сделать это снаружи?

обновлено - прошу прощения за неясный вопрос. this.refs.container ссылается на , который является dom-узлом реагирования. Сам svg не имеет проблем, так как я вижу все содержимое в svg, а также кнопку раскрывающегося списка. и вы также можете игнорировать преобразование. Как видно из примера, приведенного @Shashank, он определенно работает, но мне интересно, почему он не работает в моем приложении, несмотря на то, что коды одинаковые. Вот дополнительный код, связанный с проблемой.

Answer 1

Я снова прошу прощения за то, что дал вам путаницу. Я только что узнал, что я не импортировал файлы начальной загрузки js ..