zoukankan      html  css  js  c++  java
  • [D3] Build a Column Chart with D3 v4

    Column and bar charts are staples of every visualization library. They also make a great project for combining the essential pieces of D3 like selections, scales, axes, and SVG elements. This lesson walks you through the process of creating an essential chart type with all the required components.

    The dataset looks like:

    var data = [
      {score: 63, subject: 'Mathematics'},
      {score: 82, subject: 'Geography'},
      {score: 74, subject: 'Spelling'},
      {score: 97, subject: 'Reading'},
      {score: 52, subject: 'Science'},
      {score: 74, subject: 'Chemistry'},
      {score: 97, subject: 'Physics'},
      {score: 52, subject: 'ASL'}
    ];

    We want 'score' map to 'Y' axis and 'subject' map to 'X' axis.

    For 'Y' axis is pretty, we can use 'scaleLinear'.

    For 'X' axis we can use 'scaleBand'.

    var data = [
      {score: 63, subject: 'Mathematics'},
      {score: 82, subject: 'Geography'},
      {score: 74, subject: 'Spelling'},
      {score: 97, subject: 'Reading'},
      {score: 52, subject: 'Science'},
      {score: 74, subject: 'Chemistry'},
      {score: 97, subject: 'Physics'},
      {score: 52, subject: 'ASL'}
    ];
    
    var margin = { top: 10, right: 20, bottom: 65, left: 30 };
    var width = 400 - margin.left - margin.right;
    var height = 600 - 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)
        .call(responsivefy)
      .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
    
    /**
     * Add Y axis
     */    
    var yScale = d3.scaleLinear()
      .domain([0, 100])
      .range([height, 0]);
    var yAxis = d3.axisLeft(yScale);
    svg.call(yAxis);
    
    /**
     * Add X axis
     */
    var xScale = d3.scaleBand()
      .padding(0.2) 
      .domain(data.map(d => d.subject))
      .range([0, width]); 
    
    var xAxis = d3.axisBottom(xScale)
      .ticks(5)
      .tickSize(10)
      .tickPadding(5);
    svg
      .append('g')
        .attr('transform', `translate(0, ${height})`)
      .call(xAxis)
      .selectAll('text')  
      .attr('text-anchor', 'end') 
      .attr('transform', 'rotate(-45)'); // Rotate the text so texts won't conflict
    
    /**
     * Draw the columns
     */
    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', d => xScale(d.subject))
        .attr('y', d => yScale(d.score))
        .attr('width', d => xScale.bandwidth())
        .attr('height', d => height-yScale(d.score)); 
    
    
    
    
    function responsivefy(svg) {
      // get container + svg aspect ratio
      var container = d3.select(svg.node().parentNode),
          width = parseInt(svg.style("width")),
          height = parseInt(svg.style("height")),
          aspect = width / height;
    
      // add viewBox and preserveAspectRatio properties,
      // and call resize so that svg resizes on inital page load
      svg.attr("viewBox", "0 0 " + width + " " + height)
          .attr("preserveAspectRatio", "xMinYMid")
          .call(resize);
    
      // to register multiple listeners for same event type,
      // you need to add namespace, i.e., 'click.foo'
      // necessary if you call invoke this function for multiple svgs
      // api docs: https://github.com/mbostock/d3/wiki/Selections#on
      d3.select(window).on("resize." + container.attr("id"), resize);
    
      // get width of container and resize svg to fit it
      function resize() {
          var targetWidth = parseInt(container.style("width"));
          svg.attr("width", targetWidth);
          svg.attr("height", Math.round(targetWidth / aspect));
      }
    }

  • 相关阅读:
    java 整合 ssm (spring+ springmvc+ mybatis)
    java spring 事物 ( 已转账为例 ) 基于 aop 注解
    java spring 事物 ( 已转账为例 ) 基于 xml 配置,事务类型说明
    JAVA Spring 面向切面编程 基本案例(AOP)
    java websocket 简单的聊天室
    java websocket 实现简单的前后端即时通信
    js 通过文件输入框读取文件为 base64 文件, 并借助 canvas 压缩 FileReader, files, drawImage
    js 使用 XMLHttpRequest 请求发送 formdata 对象,从而上传文件
    html5 canvas ( 创建图形对象 ) createImageData
    编写Shell脚本的最佳实践
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7340102.html
Copyright © 2011-2022 走看看