Node+D3+Vue3

最新推荐文章于 2024-03-20 23:58:16 发布

CocoLoveOreo

最新推荐文章于 2024-03-20 23:58:16 发布

阅读量498

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/acccis/article/details/125787502

版权

实验目的：

使用vue制作一个包含d3直方图的网页再加上一个饼图、词云图或力导向图

实验过程

1. 安装Vue

1.1 下载nodejs

https://nodejs.org #下载地址

1.2 安装cnpm

在管理员终端运行以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.3 安装调试工具

下载地址：

https://github.com/vuejs/devtools#/vue-devtools

1.4 下载vue3

https://cn.vuejs.org/

1.5 安装npm和命令工具 CLI

cnpm install vue

cnpm install -g vue-cli

1.6 测试安装结果

2 使用vue制作包含d3的可视化图表

2.1 直方图

2.1.1 定义数据和比例尺

const data= [16.2,17.5,24.2,1.7,7.8,5.8,3,2.2,5.8];
    let name=['运输','建筑物','工业','农渔业','未分配燃料','无组织排放','水泥','化工','家畜','运输业','建筑物','工业','农渔业','燃料','排放','水泥','化工','  家畜'];
    let margin = 30; // 上下左右边距
    let svg = d3.select('svg');
    let width = svg.attr('width');
    let height = 480;

    let g = svg.append('g')
                .attr("transform", 'translate('+ margin +','+ margin +')'); 

    let scaleX = d3.scaleBand()
                     .domain(d3.range(data.length))
                     .rangeRound([0,width - margin*2]);
           
      let scaleY = d3.scaleLinear()
                     .domain([0,d3.max(data)])
                     .range([height - margin * 2,0]);

2.1.2 绘制矩形以及定义过渡效果

 gs.append('rect')
        .attr('x', function(d,i){
          return scaleX(i) + rectP/2;
        })
        .attr('y',function(d,i){
          var min = scaleY.domain()[0];
          return scaleY(min); 
        })
        .attr('width',function(d,i){
          return scaleX.step() - rectP+10;
        })
        .attr('height',function(d,i){
          return 0;
        })
        .attr('fill',function(d,i){
          return color[i]; 
        })
        .transition() 
        .duration(800)
        .delay(function(d,i){
          return i*200 
        })
        .attr('y',function(d,i){
          return scaleY(d)
        })
        .attr('height',function(d,i){
          return height - margin * 2 - scaleY(d)
        })

2.1.3 定义标签文字

gs.append('text')
        .attr('x',function(d,i){
          return scaleX(i) + rectP-10;
        })
        .attr('y',function(d,i){
          return height - 2 * margin;
        })
        .attr('dx',function(d,i){
          return -10;
        })
        .attr('dy',function(d,i){
          return 20;
        })
        .text(function(d,i){
          return d;
        })
        .attr('fill',function(d,i){
          return color[i];
        })
        .transition()
        .duration(1500)
        .delay(function(d,i){
          return i*200;
        })
        .attr('y',function(d,i){
          return scaleY(d) - 30
        })

2.1.4 在App.vue里引入该组件

2.1.5 实验截图

2.2 饼图

2.2.1 定义svg画布

let w=window.innerWidth 
            || document.documentElement.clientWidth 
            || document.body.clientWidth;

            let h=window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
            w=w*0.98;
            h=h*0.98;
            let svg=d3.select("#pie")
                    .append("svg")
                    .attr("width",w)
                    .attr("height",h);

2.2.2 定义数据信息和颜色信息

let dataset=[["Energy",73.2],["Industrial processes",5.2],["Waste",3.2],["Agriculture,Forestry",18.4]];
            
            
            let pie=d3.pie()
                        .value(d=>d[1]);
            let piedata=pie(dataset);
            let color=["#B22222","#8B7E66","#548B54","#4682B4"];
            let text_color=["#8B1A1A","black","#006400","#104E8B"]

2.2.3 设置弧，绘制环形

let arc=d3.arc()
                            .innerRadius(100)
                            .outerRadius(200)
            let arcs=svg.selectAll("g")
                        .data(piedata)
                        .enter()
                        .append("g")
                        .attr("transform","translate("+(w/2)+","+(h/2)+")");
            arcs.append("path")
                .attr("d",d=>arc(d))
                // .attr("fill","#7bbfea")
                .attr("fill",(d,i)=>color[i])
                .attr("stroke","white")
                .on("mouseover",(item)=>{
                    d3.select(item.target)
                        .attr("fill","#f8aba6")
                })
                .on("mouseout",(item,i)=>{
                    d3.select(item.target)
                        .attr("fill",()=>color[i.index])
                });

2.2.4 添加标签文字

svg.selectAll("text")
                .data(piedata)
                .enter()
                .append("text")
                .attr("fill","white")
                .attr("text-anchor","middle")
                .attr("font-size",function(d){
                    return (23+d.data[1]*0.5)/2;
                })
                .attr("transform",function(d){
                    let x=arc.centroid(d)[0];
                    let y=arc.centroid(d)[1];
                    return "translate("+(w/2+x)+","+(h/2+y)+")";
                })
                .text(function(d){return d.value+"%"});