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

  • 相关阅读:
    线程_Process实例
    线程_multiprocessing异步
    线程_multiprocessing实现文件夹copy器
    线程_GIL最简单的例子
    线程_FIFO队列实现生产者消费者
    线程_apply堵塞式
    正则表达式_合集下(后续还会有补充)
    正则表达式_合集上
    二分法查找
    数据结构_二叉树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7300735.html
Copyright © 2011-2022 走看看