上一篇,我们已经构建了一个基本的平面直角坐标系。本篇主要讲讲给如何给坐标系加上数据和过渡动画。
先整理一下svg
的一些基础知识点:
示例代码:
<style>
svg line {
stroke: grey;
stroke-width: 2;
}
svg circle {
stroke: red;
fill: none;
stroke-width: 2;
}
svg rect {
stroke: steelblue;
fill: none;
stroke-width: 2;
}
svg polygon {
stroke: green;
fill: none;
stroke-width: 2;
}
</style>
<script type="text/javascript">
var width = 600,
height = 500;
var svg = d3.select("body").append("svg");
svg.attr("height", height).attr("width", width);
svg
.append("line"