Kapture 2018-05-24 at 21.03.58.gif

参考

教程
D3 wiki
D3 官网
D3 中文手册

要做一个柱状图，实在有太多的选择。例如 echarts等图库，简单的配置一下就能实现。但是想用 d3 就不是那么容易了，但是还是愿意尝试一下。原本 d3 有很多教程，根据教程要实现一个柱状图按理说也不难。可是，找到的教程大多是 d3 v3版本的，v4 api 的改动还是蛮大的。在做 demo 的过程中遇到不少问题，记录一下用 v4作一个柱状图的过程。

学习时主要是根绝这篇教程，但是太多的 api 都是 v3的。改成 v4也着实费了不少劲。直接用 vue-cli 新建一个项目，在 app.vue 开始写。以下就是全部代码，依赖主要是 d3.js，没别的了。主要介绍一下 v3 和 v4 接口有差别的地方。一行行代码来说。

<template>
  <div class="hello">
    <svg></svg>
  </div>
</template>

<script>
  import * as d3 from "d3"

  export default {
    name: 'HelloWorld',
    mounted() {
      const width = 500
      const height = 500
      const dataset = [10, 20, 30, 40, 33, 24, 12, 5]
      const padding = { left: 30, right: 30, top: 20, bottom: 20 }
      const rectPadding = 4

      const svg = d3
        .select('svg')
        .attr('width', width)
        .attr('height', height)

      const xScale = d3
        .scaleBand()
        .domain(d3.range(dataset.length))
        .rangeRound([0, width - padding.left - padding.right])
      const yScale = d3
        .scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0])

      const xAxis = d3.axisBottom(xScale)
      const yAxis = d3.axisLeft(yScale)

      svg
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
        .attr('x', (d, i) => {
          return (xScale.bandwidth() + xScale.paddingInner()) * i
        })
        .attr('y', (d, i) => {
          return yScale(d)
        })
        .attr('height', (d, i) => {
          return height - padding.top - padding.bottom - yScale(d)
        })
        .attr('width', xScale.bandwidth() - rectPadding)
        .attr('fill', 'green')

      svg
        .selectAll('text')
        .data(dataset)
        .enter()
        .append('text')
        .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
        .attr('x', (d, i) => {
          return (xScale.bandwidth() + xScale.paddingInner()) * i
        })
        .attr('y', (d, i) => {
          return yScale(d)
        })
        .attr("dx", function() {
          return xScale.bandwidth() / 2 - rectPadding;
        })
        .attr("dy", 20)
        .text((d) => d)

      svg
        .append('g')
        .attr("class", "axis")
        .attr("transform", `translate(${padding.left},${height - padding.bottom})`)
        .call(xAxis)
      svg
        .append('g')
        .attr("class", "axis")
        .attr("transform", `translate(${padding.left},${padding.bottom})`)
        .call(yAxis)

      svg
        .selectAll('rect')
        .on("mouseover",function(d,i){
          d3.select(this)
            .transition()
            .duration(100)
            .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
          d3.select(this)
            .transition()
            .duration(500)
            .attr("fill","green");
        });

    }
  }
</script>

<style scoped>
  .axis path,
  .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }

  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }
</style>

<svg>

d3 虽然也支持 canvas，但是很多接口都是只支持 svg。所以用 svg好一些，当然在 v4里面更好的支持了 canvas，但是我还没学到那里。
首先在 template 中 创建一个 svg 元素，然后用d3 选择 svg 元素，设置宽、高属性。

x 轴比例尺

问题主要是从第八课 完整的柱形图开始。在教程中，设置 x 轴比例尺时，使用了如下代码：

//x轴的比例尺
var xScale = d3.scale.ordinal() // d3.scale.ordinal() v4 中改成了d3.scaleBand()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width - padding.left - padding.right]); //rangeRoundBands 也改成了 rangeRound

v4中 x 轴的比例尺应该这样子写：

const xScale = d3
  .scaleBand()
  .domain(d3.range(dataset.length))
  .rangeRound([0, width - padding.left - padding.right])

y 轴比例尺

v3 Y轴比例尺是这样的，这个没有太大变化。

//y轴的比例尺
var yScale = d3.scale.linear() //d3.scaleLinear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);

定义坐标轴

//定义x轴
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
        
//定义y轴
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
//x 轴刻度的方向向下，y 轴的向左。

在 v4中，使用axisLeft 和 axisBottom接口。

const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)

设置柱子 x 坐标

在设置 x 坐标时，要用到 x 轴比例尺。由于x 轴比例尺完全变了，所以变动也比较大。v3中

……

.attr("x", function(d,i){
    return xScale(i) + rectPadding/2;
} )
……

v4中

.attr('x', (d, i) => {
  return (xScale.bandwidth() + xScale.paddingInner()) * i
})

这里要用张图来解释一下，柱子的宽度用 xScale.bandwidth() 获取

image.png

柱子宽度

设置柱子宽度的属性时，v3

……
.attr("width", xScale.rangeBand() - rectPadding )
……

v4

……
.attr('width', xScale.bandwidth() - rectPadding)
……