zoukankan      html  css  js  c++  java
  • [D3] Create Chart Axes with D3 v4

    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);   
      
    
      

  • 相关阅读:
    jQuery
    前端开发之JavaScript篇
    前端开发之css篇
    前端开发之html篇
    mysql续
    MySQL入门
    进程线程协程那些事儿
    Python之socket网络编程
    2016.6.24——vector<vector<int>>【Binary Tree Level Order Traversal】
    2016.6.21——Climbing Stairs
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7300735.html
Copyright © 2011-2022 走看看