实验目的：

使用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+"%"});

2.2.5 实验截图