我想知道使用 d3 向我的组元素添加按钮的最佳方法是什么。
我目前使用 d3 构建了我的视觉效果,如下所示:
<div>
<svg>
<g>
<rect>
</g>
<g>...</g>
</svg>
</div>
所以我想知道如何在每个组元素中添加一个可点击的按钮。我的一些想法是:
g.append("a")
.append("image")
.attr("src", ...);
或
g.append("a")
.append("rect")
.attr(...)
最终我希望按钮执行 onclick 事件。解决这个问题的最佳方法是什么?
最佳答案
您可以创建一个矩形
并使用d3的selection.on注册点击监听器的api:
var rect = d3.select('svg g rect');
rect.on('click', function() {
console.log('i was clicked');
});
.as-console-wrapper { max-height: 3.5em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="400" height="400">
<g transform="translate(50,50)">
<rect height="100" width="200" fill="red"/>
</g>
</svg>
关于javascript - 使用 d3 将按钮添加到 <g> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27009672/