vue test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js" ></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="app">
    <svg>
    </svg>
  </div>
  <script type="text/javascript">
    // Feel free to change or delete any of the code you see in this editor!
    
		new Vue({
      el:"#app",
      data: () => {
        return {
          values: [99, 71, 78, 25, 36, 92],
          selected: null,
        };
      },
      mounted: () => {
         const svg = d3.select("svg")
          .attr('width', 500)
          .attr('height', 270)
          .append('g')
          .attr('transform', 'translate(0, 10)');
    		const x = d3.scaleLinear().range([0, 430]);
    		const y = d3.scaleLinear().range([210, 0]);
    		d3.axisLeft().scale(x);
    		d3.axisTop().scale(y);
    		x.domain(d3.extent(this.values, (d, i) => i));
    		y.domain([0, d3.max(this.values, d => d)]);
    		const createPath = d3.line()
      		.x((d, i) => x(i))
      		.y(d => y(d));
    		svg.append('path').attr('d', createPath(data));
      }
    });
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js