vue+ D3+drag

Posted 2020-11-02 你好,年轻人......

import template from ‘./explore.vue‘
//import dataJson from ‘./data.json‘
import * as d3 from ‘d3‘
import Draggabilly from ‘draggabilly‘
export default {
  ...template,
  name: ‘explore‘,
  data(){
    return {
      dataJson: {
        "name":"中国",
        "children": [{
          "name":"广西" ,
          "children":
            [
              {
                "name":"桂林",
                "children":
                  [
                    {"name":"秀峰区"},
                    {"name":"叠彩区"},
                    {"name":"象山区"},
                    {"name":"七星区",
                      "children":
                        [
                          {"name":"哈尔滨"},
                          {"name":"齐齐哈尔"},
                          {"name":"牡丹江"},
                          {"name":"大庆"}
                        ]
                    }
                  ]
              },
              {"name":"南宁"},
              {"name":"柳州"},
              {"name":"防城港"}
            ]
        }]
      }
  }
  },
  mounted () {
    this.$nextTick(function () {
      let width = 600
      let height = 600
      let svg = d3.select(‘#tree-container‘).append(‘svg‘)
        .attr(‘width‘, 1500)
        .attr(‘height‘, 850)
        .append(‘g‘)
        .attr(‘transform‘, ‘translate(40,0)‘)
/* 定义了元素拖拽行为的原点
设置为圆的圆心位置可以避免明显的元素跳动
第一个参考连接中的例子可以看到明显的跳动
*/
      var drag = d3.drag()
        .subject(function() {
          var t = d3.select(this);
          return {
            x: t.attr("cx"),
            y: t.attr("cy")
          };

        })
        .on("drag", dragmove);
        /* 树状图
        * */
      let cluster = d3.tree()
        .size([width, height - 100]);
      // 此处省略请求方法
      let nodes = d3.hierarchy(this.dataJson);
      let haveDeal = cluster(nodes);
      /**
       * 所有节点
       * */
      let lastAfterEdit = haveDeal.descendants();

      /**
       * 所有连线
       * */
      let links = nodes.links();
      /**
       * 画连线
       * */
      let link = svg.selectAll(‘.link‘)
        .data(links)
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d3.linkHorizontal()
          .x(function (d) {
            return d.y;
          })
          .y(function (d) {
            return d.x;
          }));
      /**
       * 画圆圈
       * */
      var circles = svg.selectAll(‘.circle‘)
        .data(lastAfterEdit)
        .enter()
        .append("circle")
        .attr(‘cx‘, function (d) {
          return d.y;
        })
        .attr(‘cy‘, function (d) {
          return d.x;
        })
        .attr("r", 6)
        .attr(‘class‘,‘nodes-group‘)
        .attr("data", function (d) {
          return d.data.name;
        })
        .call(drag);
      /**
       *  画文本
       * */
      var texts = svg
        .selectAll(‘text‘)
        .data(lastAfterEdit)
        .enter()
        .append(‘text‘)
        .attr(‘x‘, function (d) {
          return d.y;
        })
        .attr("id", function (d) {
          return d.data.name;
        })
        .attr(‘y‘, function (d) {
          return d.x;
        })
        .text(function (d) {
          return d.data.name;
        })
        .style("text-anchor", function (d) {
          return d.children ? "end" : "start";
        })
        .attr("dx", function (d) {
          return d.children ? -10 : 10;
        })
        .attr(‘dy‘, function (d) {
          return 5;

        });
      function dragmove(d) {
        /* 只能拖拽圆 */
        d3.select(this)
          .attr("cx", function() {
            return d.cx = d3.event.x
          })
          .attr("cy", d.cy = d3.event.y)
        /* 拖拽圆后，要控制文字的上（减）、下（加）、左（减）、右方向 */
        var txt = svg.select(‘#‘+d.data.name)
          .attr(‘y‘,function(){
            return d.x = event.offsetY
          })
          .attr(‘x‘,function(){
            return d.y = event.offsetX-40
          })
        /* 重新绘制线的路径 */
        link.attr("d", d3.linkHorizontal()
          .x(function (d) {
            return d.y;
          })
          .y(function (d) {
            return d.x;
          }));
      }

    })
  }

}

if (typeof window !== ‘undefined‘ && window.Vue) {
  window.Vue.component(‘o-explore‘, template)
}