{"size": 1340, "ext": "js", "max_stars_repo_path": "src/components/Trag/Trag.js", "max_stars_repo_name": "zhoubopro/D3-Workflow", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Trag/Trag.js", "max_issues_repo_name": "zhoubopro/D3-Workflow", "max_issues_repo_issues_event_min_datetime": "2019-02-18T08:20:40.000Z", "max_issues_repo_issues_event_max_datetime": "2019-02-18T08:20:40.000Z", "max_forks_repo_path": "src/components/Trag/Trag.js", "max_forks_repo_name": "zhoubopro/D3-Workflow", "max_forks_repo_forks_event_min_datetime": "2018-12-26T15:51:51.000Z", "max_forks_repo_forks_event_max_datetime": "2018-12-26T15:51:51.000Z"}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 18.1081081081, "max_line_length": 70, "alphanum_fraction": 0.5014925373}
import React, {Component} from 'react';
// import ReactDOM from 'react-dom';
import './Trag.less';
import * as D3 from 'd3';

/**
 * 拖拽
 */
class Trag extends Component {

  constructor() {
    super();
  }

  componentDidMount() {
    // 绘制圆
    let circles = [
      {cx: 150, cy: 200, r: 30},
      {cx: 250, cy: 200, r: 30}
    ];

    let svg = D3.select('#container-trag')
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%');

    // 拖拽
    let drag = D3.drag()
      .on('drag', this.dragmove);

    svg.selectAll('circle')
      .data(circles)
      .enter()
      .append('circle')
      .attr('cx', function (d) {
        return d.cx;
      })
      .attr('cy', function (d) {
        return d.cy;
      })
      .attr('r', function (d) {
        return d.r;
      })
      .attr('stroke', 'black')
      .attr('stroke-width', '2px')
      .attr('fill', '#fff')
      .attr('fill-opacity', .95)
      .style('cursor', 'pointer')
      .call(drag).append('text').text('开始');  //这里是刚才定义的drag行为

  }

  // 拖拽
  dragmove(d) {
    D3.event.sourceEvent.stopPropagation(); // silence other listeners
    D3.select(this)
      .attr('cx', d.cx = D3.event.x)
      .attr('cy', d.cy = D3.event.y)
  }


  render() {

    return (
      <div id="container-trag">

      </div>
    );
  }

}

export default Trag;
