第二章——vue、d3进阶之第一个图表

1、柱形图表效果

代码：

<template>
  <div id="mydiv">
    <svg>
      <rect></rect>
    </svg>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted(){
    this.getlist();
  },
  methods:{
    getlist(){
      let datas = [250,210,170,130,90]
      let width = 300;
      let height = 300;
      //制作画布
      let svg = d3.select("body")
        .append("svg")
        .attr("width",width)
        .attr("height",height);

      let rectHeight = 25;//定义每个矩形的高度
      svg.style("background-color","black")
      svg.selectAll("rect")
        .data(datas)
        .enter()
        .append("rect")
        .attr("x",20)//生成的图形距离画布左侧20px
        .attr("y",function(d,i){//生成的图形距离画布顶部20px
          return i*rectHeight;
        })
        .attr("width",function(d){//矩形的宽度，这里直接使用的数据的值
          return d;
        })
        .attr("height",rectHeight-2)//矩形的高度
        .attr("fill","steelblue")//矩形的颜色
    },
  },
};
</script>
<style lang="sass" scoped>

</style>

2、添加比例尺（线性比例尺）

之前使用的都是以值作为矩形的长度，但如果值过大或太小豆不在适合了，所以就需要使用比例尺

效果图

添加的代码

let datas = [2.5, 2.1, 1.7, 1.3, 0.9];//改变之前的data数据
let min = d3.min(datas);//最大
let max = d3.max(datas);//最小
let linear = d3.scaleLinear()//此处与用html写法不同,在htnl中是d3.scale.linear()
               .domain([min,max])
               .range([0,250]);

同时修改矩形的宽度返回值

.attr("width",function(d){//矩形的宽度，这里直接使用的数据的值
          // return d;
          return linear(d);
        })

3、添加序数比例尺

效果图

添加的代码

let color = ['red' ,'blue', 'green', 'yellow', 'white']
//序数比例尺
let ordinal = d3.scaleOrdinal()
                .domain(datas)
                .range(color)

同时修改矩形的颜色“”fill

.attr("fill",function(d) {
          return ordinal(d);
        })//矩形的颜色

4、添加坐标轴

效果图

代码如下

<template>
  <div id="mydiv">
    <svg>
      <rect></rect>
      <!-- <g>
        <g>
          <line></line>
          <text></text>
        </g>
        <path></path>
      </g> -->
    </svg>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  mounted() {
    this.getlist();
  },
  created() {
    // this.getlinear();
  },
  methods: {
    // getlinear(){},
    getlist() {
      let datas = [2.5, 2.1, 1.7, 1.3, 0.9];
      let min = d3.min(datas);
      let max = d3.max(datas);
      //线性比例尺
      let linear = d3
        .scaleLinear() //此处与用html写法不同
        .domain([0, max])//[min,max]此处如果写min的话，那最小值就是min，所以最好不要写min不然最小值在图中就无法显示出来
        .range([0, 250]); 
      //轴
      let axis = d3.axisBottom(linear).ticks(7);//在vue中的使用方法与html不一样
      // d3.svg.axis()
      //   .scale(linear)//指定比例尺
      //   .orient("bottom")//指定刻度的方向
      //   .ticks(7);//指定刻度的数量

      let width = 300;
      let height = 300;
      //制作画布
      let svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      //在svg画布中添加坐标轴
      svg
        .append("g")
        .attr("class", "axis") //定义类名
        .attr("transform", "translate(10,130)") //坐标轴位置
        .call(axis);

      // axis(svg.append("g").attr("transform","translate(10,130)"));//也可以使用这个添加坐标轴

      let rectHeight = 25; //定义每个矩形的高度
      // svg.style("background-color","black")//画布背景色
      svg
        .selectAll("rect")
        .data(datas)
        .enter()
        .append("rect")
        .attr("x", 20) //生成的图形距离画布左侧20px
        .attr("y", function(d, i) {
          //生成的图形距离画布顶部20px
          return i * rectHeight;
        })
        .attr("width", function(d) {
          //矩形的宽度，这里直接使用的数据的值
          // return d;
          return linear(d);
        })
        .attr("height", rectHeight - 2) //矩形的高度
        .attr("fill", "red"); //矩形的颜色
    }
  }
};
</script>
<style scoped>

</style>