Vue整合d3.v5.js制作--柱状图(rect)

先上效果图：

图中柱状图变成纯蓝色是鼠标滑动过的颜色（颜色可改，本人配色能力十分的强，建议直接用默认设置即可 ( ᖛ ̫ ᖛ )ʃ)）

1、环境说明

Vue版本："vue": "^2.5.2"

d3版本："d3": "^5.9.1"

2、Histogram.vue源码

 <!--
   d3组件：柱状图
   属性说明：
    id：必填，如果同一页面引用多个柱状图，请设置不同的id
    width：选填，默认600
    height：选填，默认600
    begincolor：选填，柱状图渐变色的起始颜色，默认绿色
    endcolor：选填，柱状图渐变色的结束颜色，默认蓝色
    selectcolor：选填，鼠标滑过柱状图时显示的颜色，默认蓝色
    dataset：必填，数据
      数据格式：
         [
           {'name': '北京', value: },
           {'name': '厦门', value: },
           {'name': '大兴安岭', value: },
           {'name': '苏州', value: }
         ]
    rotate：选填，当x轴文字过长，可设置此值为true让文字旋转，默认不旋转
    onRectClick: 选填，点击柱状图的自定义事件
 -->

 <template>
   <div class="histogram" :id="id">
   </div>
 </template>

 <script>
   import * as d3 from 'd3'
   function noop(d, i) {
     // console.log(d)
     // console.log(i)
   }
   export default {
     name: 'histogram',
     props: {
       id: String,
       width: Number,
       height: Number,
       begincolor: String,
       endcolor: String,
       selectcolor: String,
       dataset: Array,
       rotate: Boolean,
       onRectClick: {
         type: Function,
         default: noop
       }
     },
     mounted () {
       this.init();
     },
     methods: {
       init() {
         d3.select("#svg" + this.id).remove();
         let width = this.width ? this.width : ;
         let height = this.height ? this.height : ;
         let svg = d3.select("#" + this.id).append("svg").attr("width", width).attr("height", height).attr("id", "svg" + this.id);
         let begincolor = this.begincolor ? this.begincolor : 'steelblue';
         let endcolor = this.endcolor ? this.endcolor : 'green';
         let selectcolor = this.selectcolor ? this.selectcolor : 'steelblue';
         let linecolorid = 'linecolor' + this.id;
         let linearGradient = svg.append('defs').append('linearGradient').attr('id', linecolorid)
           .attr('x1', '0%').attr('y1', '0%').attr('x2', '0%').attr('y2', '100%')
         linearGradient.append('stop').attr('offset', '0%').attr('style', 'stop-color:' + begincolor + '; stop-opacity:1')
         linearGradient.append('stop').attr('offset', '100%').attr('style', 'stop-color:' + endcolor + '; stop-opacity:1')
         let gwidth = width - ;
         let gheight = height - ;
         let values = this.dataset.map(d => d.value)
         let xScale1 = d3.scaleBand().range([, gwidth]).domain(this.dataset.map(d => d.name))
         let yScale1 = d3.scaleLinear().domain([, d3.max(values)]).range([gheight, ]);
         let xAxis = d3.axisBottom().scale(xScale1);
         let yAxis = d3.axisLeft().scale(yScale1);
         let xScale = d3.scaleBand()
           .domain(d3.range(this.dataset.length))
           .rangeRound([, gwidth])
           .round(0.05);
         let yScale = d3.scaleLinear()
           .domain([, d3.max(values)])
           .range([, gheight]);
         svg.selectAll("rect")
           .data(values)
           .enter()
           .append("rect")
           .attr("x", (d, i) =>  + xScale(i))
           .attr("width", xScale.bandwidth() - )
           .attr("y",  + gheight)
           .attr("height", )
           .attr("fill", "red")
           .on("click", this.onRectClick)
           // .on("click", function(d, i) {
           //   d3.select(this)
           //     .transition()
           //     .duration(1000)
           //     .ease(d3.easeBounce)
           //     .attr("fill", "green");
           // })
           .on("mouseover", function(d, i) {
             d3.select(this)
             // .transition(d)
             // .duration(200)
             // .ease(d3.easeBounce)
               .attr("fill", selectcolor);
           })
           .on("mouseout", function(d, i) {
             d3.select(this)
             // .transition(d)
             // .duration(200)
             // .ease(d3.easeBounce)
               .attr("fill", "url(#" + linecolorid + ")");
           })
           .transition()
           .duration()
           .ease(d3.easeBounce)
           .delay((d, i) => i * )
           .attr("y", (d) =>  + gheight - yScale(d))
           .attr("height", yScale)
           .attr("fill", "url(#" + linecolorid + ")");

         svg.selectAll("text")
           .data(values)
           .enter()
           .append("text")
           .attr("x", (d, i) =>  + xScale(i))
           .attr("y", d =>  + gheight - yScale(d))
           .attr("dx", xScale.bandwidth() / )
           .attr("dy", )
           .attr("text-anchor", "begin")
           .attr("font-size", () => {
             if (width > ) return ;
             else return ;
           })
           .attr("fill", "white")
           .transition()
           .delay()
           .text(d => d);

         let xvalues = svg.append("g")
           .attr("transform", "translate(60, " + (gheight + ) + ")")
           .call(xAxis)

         if (this.rotate) {
           xvalues.selectAll('text')
             .attr("dx", -)
             .attr("dy", )
             .attr("transform", "rotate(-30)")
         }

         svg.append("g")
           .attr("transform", "translate(60, 50)")
           .call(yAxis);

         // if (this.width && this.height) {
         //   svg.attr("width", this.width)
         //     .attr("height", this.height)
         //     .attr("viewBox", "0 0 600 600");
         // }
       }
     },
     watch: {
       dataset() {
         this.init();
       }
     }
   }
 </script>

 <style>

 </style>

3、api说明

   d3组件：柱状图
   属性说明：
    id：必填，如果同一页面引用多个柱状图，请设置不同的id
    width：选填，默认600
    height：选填，默认600
    begincolor：选填，柱状图渐变色的起始颜色，默认绿色
    endcolor：选填，柱状图渐变色的结束颜色，默认蓝色
    selectcolor：选填，鼠标滑过柱状图时显示的颜色，默认蓝色
    dataset：必填，数据
      数据格式：
         [
           {'name': '北京', value: },
           {'name': '厦门', value: },
           {'name': '大兴安岭', value: },
           {'name': '苏州', value: }
         ]
    rotate：选填，当x轴文字过长，可设置此值为true让文字旋转，默认不旋转
    onRectClick: 选填，点击柱状图的自定义事件

4、使用示例

 <template>
   <div id="test">
     <histogram id="histogram" :dataset="data" :onRectClick="test"></histogram>
   </div>
 </template>

 <script>
   import histogram from '@/components/d3/Histogram'
   export default {
     name: 'test',
     data() {
       return {
         data: [
           {'name': '北京', value: },
           {'name': '厦门', value: },
           {'name': '大兴安岭', value: },
           {'name': '苏州', value: }
         ]
       }
     },
     components: {
       histogram
     },
     methods: {
       test(d, i) {
         this.$alert(d, i, {
           confirmButtonText: '确定',
           callback: action => {
             this.$message({
               type: 'info',
               message: `action: ${ action }`
             });
           }
         });
       }
     }
   }
 </script>

 <style scoped>
 </style>