d3入门篇

0.尺度

scaleLinear([0, 100])是线性比例尺；.domain(域)如果指定了域，则将比例的域设置为指定的数字数组并返回该比例；.range(范围),如果指定了范围，则将比例范围设置为指定的值数组并返回该比例。

1.画坐标轴

<template>
  <div class="root">
    <div class="box" ref="box"></div>
  </div>
</template>
<script>
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;
import * as d3 from 'd3';
export default {
  data() {
    return {};
  },
  mounted() {
    this.initLine();
  },
  methods: {
    // 刻画刻度线
    initLine() {
      const svg = d3.create('svg').attr('width', width).attr('height', height);
      const xLine = d3
        .scaleLinear()
        .domain([0, 50])
        .range([marginLeft, width - marginRight]);
      const yLine = d3
        .scaleLinear()
        .domain([0, 100])
        .range([height - marginBottom, marginTop]);
      const xAxis = d3.axisBottom(xLine);

      svg
        .append('g')
        .attr('transform', `translate(0,${height - marginBottom})`)
        .call(xAxis);

      svg.append('g').attr('transform', `translate(${marginLeft},0)`).call(d3.axisLeft(yLine));

      this.$refs.box.appendChild(svg.node());
    }
  }
};
</script>

<style lang="scss" scoped>
.root {
}
</style>

 2.控制轴的样式

.ticks()用于控制轴的段数；tickSiz()控制轴刻度线的长度，默认6；tickSizeInner()控制x轴数据离X轴的距离；默认6

const xAxis = d3.axisBottom(xLine).ticks(5).tickSize(10).tickSizeInner(10);

 

 .tickSizeOuter()默认值6；外部刻度大小控制域路径的方形末端的长度，偏离轴的原始位置。因此，“外部刻度”实际上并不是刻度，而是域路径的一部分，并且它们的位置由关联比例的域范围确定。因此，外部刻度可能与第一个或最后一个内部刻度重叠。

const xAxis = d3.axisBottom(xLine).ticks(5).tickSize(10).tickSizeInner(0).tickSizeOuter(10);

.tickPadding()是数据距离X轴的填充距离

const xAxis = d3.axisBottom(xLine).ticks(5).tickSize(0).tickPadding(20);

 

 .offset() X轴的偏移量，指的是轴

 const xAxis = d3.axisBottom(xLine).ticks(5).tickSize(0).tickPadding(20).offset(10);