使用 d3 向 <g> 元素添加按钮

Question

我想知道使用 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 事件。解决这个问题的最佳方法是什么？

Answer 1

您可以创建一个rect并使用 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>