JSFiddle - React, Tailwind, and code Playground

by alexcheninfo

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.15/vue.min.js"></script>
<body>
  <p>Pos: {{pos}}</p>
  <p>PosX: {{x}}</p>
  <p>PosY: {{y}}</p>
</body>

JavaScript

'use strict'

new Vue({
  el: 'body',

  data: {
    x: '',
    y: ''
  },

  computed: {
    pos: function () {
      function click() {
	// Ignore the click event if it was suppressed
	if (d3.event.defaultPrevented) return

	// Extract the click location\
	var point = d3.mouse(this),
	  p = { x: point[0], y: point[1] }
	// console.log('point:', point)

	// Append a new point
	svg.append('circle')
	  .attr('transform', 'translate(' + p.x + ',' + p.y + ')')
	  .attr('r', '5')
	  .attr('class', 'dot')
	  .style('cursor', 'pointer')
	  .call(drag)

	var dots = d3.selectAll(".dot")
	// console.log(dots)
      }

      // Create the SVG
      var svg = d3.select('body').append('svg')
	.attr('width', 400)
	.attr('height', 400)
	.on('click', click)

      // Add a background
      svg.append('rect')
	.attr('width', '100%')
	.attr('height', '100%')
	.style('stroke', '#999999')
	.style('fill', '#F6F6F6')

      // Define drag beavior
      var drag = d3.behavior.drag()
	.on('drag', dragmove)

      function dragmove(d) {
	var x = d3.event.x
	var y = d3.event.y
	d3.select(this).attr('transform', 'translate(' + x + ',' + y + ')')
	// console.log('dragmove x:', x)
	// console.log('dragmove y:', y)
	this.x = x
	this.y = y
	console.log('x:', this.x)
      }

    console.log('x:', this.x)
    return this.x
    }
  },

  ready: function () {
  }
})