d3入门练习系列（一）绘制四边形

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)")

这下就可以看到完整的旋转后的四方形了。