d3js中开始过渡的按钮不起作用

button to start transition in d3js doesn't work

本文关键字：按钮 不起作用 开始 d3js      更新时间：2023-09-26
<!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>

我有一个正方形，我想给它添加过渡效果。我有按钮，当点击时，将不得不开始过渡。但由于某些原因，它不起作用。有人能帮帮我吗?

在添加onclick功能之前，您需要使用D3来选择按钮元素。在button.on("click", ...):

前面添加这一行
var button = d3.select("button");

然后将onclick事件监听器绑定到页面中的按钮。

相关文章：