在 d3js 中开始转换的按钮不起作用答案

【问题标题】：button to start transition in d3js doesn't work在 d3js 中开始转换的按钮不起作用
【发布时间】：2023-04-07 12:11:01
【问题描述】：

<!DOCTYPE html>
<meta charset="utf-8">
<style>




</style>
<button>transition</button>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>




var canvas = d3.select("body")
  .append("svg")
  .attr("width", 1200)
  .attr("height", 675)


var mySquare = canvas.append("rect")
  .attr("x",60)
  .attr("y",60)
  .attr("width",60)
  .attr("height",60);


button.on("click", function() {
  mySquare.transition().attr("x",600);
})

</script>

我有一个正方形，我想在上面放置一个过渡。我有一个按钮，当点击它时，它必须开始转换。但由于某种原因它不起作用。有人可以帮帮我吗？

【问题讨论】：

为什么不在自动加载或 jQuery 的 DOM-ready 函数中使用它？

标签： javascript button d3.js transition

【解决方案1】：

您需要使用D3 to select 按钮元素，然后才能向其添加onclick 功能。在button.on("click", ...)之前添加这一行：

var button = d3.select("button");

然后，您实际上将 onclick 事件侦听器绑定到页面中的按钮。

【讨论】：