vue+ D3+drag

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)
}

  

原文地址:https://www.cnblogs.com/caolidan/p/8993869.html

时间: 2024-10-08 18:22:36

vue+ D3+drag的相关文章

D3 drag行为

d3.behavior.drag():创建一个新的拖动行为. drag.on(type[,listener]): type:开始,拖动,结束. 如果没有listener,则为type指定已注册的listener.但我测试时,如果不加listener时会出错. drag会返回x,y,可根据origin来修改,在局部坐标系统(svg).dx,dy是相对于开始坐标的. 拖动期间,浏览器的默认行为会被阻止,比如点击事件.也可以阻止冒泡. drag.origin([origin]):决定拖动开始的位置.

Vue D3 力导向图

1. 安装 前端工程根目录下执行 yarn add d3 ,安装 d3 依赖包.安装的版本 "d3": "^5.7.0" 2. vue 文件中引入 d3 import * as d3 from 'd3' 例如一个基础的 d3.vue 文件内容,包含基本的 <template> <script> <style> <template> <div> <svg width="960" he

D3.js 入门学习(二) V4的改动

//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不仅仅是计算极值. */ var a1 = [1,3,5,2,9]; var i = d3.scan(a1,function(a,b){ return b-a; // 返回最大值的索引, a-b; 返回最小值的索引 }); console.log(i); //4; //d3.ticks d3.tick

vue1.0 -vue 2.0

vue.js 发表于 2017-01-15   | vue基础 vue1.0 vue1.0对象的属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var vm = new Vue({ el:'#box', //容器 data:{ //数据 msg:"data", a:1 }, methods:{ //普通方法 }, computed:{ //计算属性(属性b随着其return

[D3] Add image to the node

We can create node with 'g' container, then append 'image' to the nodes. // Create container for the images const svgNodes = svg .append('g') .attr('class', 'nodes') .selectAll('circle') .data(d3.values(nodes)) .enter().append('g'); // Add image to t

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue基础知识总结(二)

一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} (2){{msg}},等价于<span v-text="msg"></span> (3){{{msg}}},html转意输出,等价于<span v-html="msg"></span>(在v2.0上,三括号已经删除) 二.

vue 自定义拖拽指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例方法</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal

13.vue组件

vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="vue.js"></script> <script> Vue.component("aaa",{ template:`&l