... 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 指的是 <svg ref="container"> 这是 react 的 dom 节点。svg 本身没有问题，因为我看到了 svg 中的所有内容以及下拉按钮。你也可以忽略变换。正如@Shashank 给出的示例所示，它确实有效，但我想知道为什么尽管代码相同，但它在我的应用程序上却没有。这是与问题相关的附加代码。