Vue.js中使用D3.js绘制SVG图形

Web

使用 D3.js 绘制 SVG 图形通常使用 D3 的 API 动态添加 SVG 元素并绘制元素。在 Vue.js 中依然可以采用该方法创建 SVG 图形。
类似 React，Vue.js 也支持 ref 属性。在 template 中定义 ref 属性。

<template>
  <div>
    <h1>
      Chart
    </h1>
    <div ref="chart_canvas_ref">
    </div>
  </div>
</template>

在 script 中可以使用如下方式通过 ref 访问元素：

this.$refs.chart_canvas_ref

D3.js 的 d3.select 支持 DOM 节点作为参数，因此创建 svg 的方法如下：

let svg_node = d3.select(this.$refs.chart_canvas_ref) 
              .append('svg')
              .attr('width', this.width)
              .attr('height', this.height);

后面就可以在 svg_node 上使用 D3.js 的 API 创建 svg 元素。