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

  • 相关阅读:
    (转)大型分布式网站架构技术总结
    VC中怎么输入特殊符号(如平方、立方等下标符号)
    【转】VC++的Unicode编程
    【转】VC下的Unicode编程
    MFC多国语言——资源DLL
    MFC多国语言——资源副本
    【转】SetThreadLocale解决越南文乱码问题
    【转】msxml 操作xml
    关于形如--error LNK2005: xxx 已经在 msvcrtd.lib ( MSVCR90D.dll ) 中定义--的问题分析解决
    vc6项目-vc8项目 转换日志
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7340102.html
Copyright © 2011-2022 走看看