d3是一个非常好的可视化框架,有时可以弥补echarts、openlayers等框架难以解决的问题。下面一起简单学习下。
引用
以html为例子,在文件头中以下内容就可以了。
<script type = "text/javascript" src = "https://d3js.org/d3.v7.min.js"></script>
简单示例
<div id="app"></div>
<script>
let width = 500,height = 500
let svg = d3.select('#app')
.append('svg')
.attr('width', width)
.attr('height', height)
</script>
上面的代码简单给过程就是
1.找到id未app的标签
2.给标签加个子节点svg
3.指定svg的高度和宽度
完成以上步骤后,就可以做svg绘制操作了。
可以看到,d3支持链式操作。
画一个四方形,长100高50
let width = 500,height = 500
let svg = d3.select('#app')
.append('svg')
.attr('width', width)
.attr('height', height)
let g = svg.append('g')
.append('polygon')
.attr('points', [[0,0], [100, 0], [100, 50], [0, 50]])
给四方形上色
接上面代码
...
.attr('fill', 'green')
旋转下30°
接上面代码
...
.attr("transform", "rotate(30)")
旋转了,但是怎么形状变了?
其实因为旋转的中心是以画布左上角的为顶点。
向右平移30像素
修改transform
...
.attr("transform", "rotate(30) translate(30, 0)")
这下就可以看到完整的旋转后的四方形了。