[D3] Create Chart Axes with D3 v4

最新推荐文章于 2020-07-17 19:41:16 发布

weixin_30329623

最新推荐文章于 2020-07-17 19:41:16 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7300735.html

本文介绍使用D3.js创建和定制图表轴的方法，包括线性比例尺设置、轴的添加及刻度调整等，适合希望掌握D3.js进阶技巧的读者。

Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons.

var margin = { top: 10, right: 20, bottom: 60, left: 25 };
var width = 425 - margin.left - margin.right;
var height = 625 - margin.top - margin.bottom;

var svg = d3.select('.chart')
  .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

svg.append('rect')
  .attr('width', width)
  .attr('height', height)
  .style('fill', 'lightblue')
  .style('stroke', 'green');

  /**
   * Create Y axis
   */
  // Set scale
  const yScale = d3.scaleLinear()
                    .domain([0, 100])
                    .range([height, 0]);
  // add y-axis  
  const yAxis = d3.axisLeft(yScale);
  // const yAxis = d3.axisLeft(yScale).ticks(10, '.1s');
  // If you want to add fine control about the ticks:
  // const yAxis = d3.axisLeft(yScale).tickValues([5,10,30,50,80,100]);
  // add to the svg
  svg.call(yAxis);    


  /**
   * Create X axis
   */
  const xScale = d3.scaleTime()
    .domain([new Date(2017, 6, 1),  new Date(2017, 7, 1)])
    .range([0, width]);

    //https://github.com/d3/d3-time
  const xAxis = d3.axisBottom(xScale)
    .ticks(d3.timeDay.every(4))
    .tickSize(10)
    .tickPadding(15);

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