我在使用D3.js的Enter，Update，Exit方法时遇到问题。我不能让我的矩形更新或退出。我做错了什么？我也不太了解更新或退出 - 是什么决定了形状是退出还是更新？什么是合并？我认为脚本的输入部分工作正常。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 selections</title>
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>D3 Selection Exercise</h1>
</div>
<div class="container-fluid directions">
<div class="row">
<div class="col-md-6 text-center">
<h2>This exercise </h2>
</div>
<div class="col-md-6 text-center">
<button type="button" class="btn btn-primary btn-lg">D3 Button</button>
</div>
</div>
</div>
<!-- create SVG with 4 rectangles -->
<svg id="mysvg" width="1438" height="726">
<rect x="50" y="30" width="30" height="100" style="fill: #2980b9;stroke-width:3;stroke:#bdc3c7" />
<rect x="250" y="30" width="30" height="100" style="fill:#2980b9;stroke-width:3;stroke:#bdc3c7" />
<rect x="500" y="30" width="30" height="100" style="fill:#2980b9;stroke-width:3;stroke:#bdc3c7" />
<rect x="750" y="30" width="30" height="100" style="fill:#2980b9;stroke-width:3;stroke:#bdc3c7" />
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- JQuery click event on button -->
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
draw([2, 4, 6, 8, 27]);
});
});
var svg = d3.select("#mysvg")
.attr("width", window.innerWidth)
.attr("height", window.innerHeight);
// Draw function
function draw(dataArray) {
var rectangles = svg.selectAll("rect")
.data(dataArray);
// Exit
rectangles.exit()
.transition().duration(1000)
.attr("width", 0)
.attr("height", 0)
.attr("fill", "red")
.remove();
// Enter
var enterRectangles = rectangles.enter().append("rect")
.attr("width", 30)
.attr("height", 100)
.attr("y", 30)
.attr("x", function(d, i) {
return 750 + (50 * (i + 1));
})
.style("fill", "#2980b9")
.style("stroke-width", "3")
.style("stroke", "#bdc3c7" );
// Update
rectangles.merge(enterRectangles)
.transition().duration(1000)
.attr("height", function(d) {
return d;
})
.attr("fill", "green");
};
</script>