d3实现柱状图图表效果代码-html代码-BFW代码库

d3实现柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：d3实现柱状图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .align {
          display: grid;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          justify-items: center;
          place-items: center;
        }
        
        /* layout/base.css */
        
        :root {
          --bodyFontFamily: 'Roboto', sans-serif;
          --bodyLineHeight: 1.5;
        }
        
        * {
          -webkit-box-sizing: inherit;
                  box-sizing: inherit;
        }
        
        html {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
        
        body {
          font-family: 'Roboto', sans-serif;
          font-family: var(--bodyFontFamily);
          line-height: 1.5;
          line-height: var(--bodyLineHeight);
          margin: 0;
          min-height: 100vh;
        }
        
        /* modules/chart.css */
        
        :root {
          --chartMarginBlockEnd: 1.5rem;
        
          --chartBarColor: #f32a64;
        
          --chartColumnColor: #e6edf4;
        
          --chartAxisColor: #e6edf4;
          --chartAxisFontSize: 0.625rem;
          --chartAxisStrokeWidth: 0.125rem;
        }
        
        .chart {
          margin-bottom: 1.5rem;
          margin-bottom: var(--chartMarginBlockEnd);
        }
        
        .chart__bar {
          fill: #f32a64;
          fill: var(--chartBarColor);
        }
        
        .chart__column {
          fill: #e6edf4;
          fill: var(--chartColumnColor);
        }
        
        .chart__axis {
          font-size: 0.625rem;
          font-size: var(--chartAxisFontSize);
        }
        
        .chart__axis path,
        .chart__axis line {
          fill: none;
          stroke: #e6edf4;
          stroke: var(--chartAxisColor);
          stroke-width: 0.125rem;
          stroke-width: var(--chartAxisStrokeWidth);
        }
        
        .chart__axis path {
          display: none;
        }
        
        /* modules/image.css */
        
        svg {
          height: auto;
          max-width: 100%;
          vertical-align: middle;
        }
    </style>
</head>

<body>


    <div>
        <h2 style="text-align:center;">Bar Chart</h2>
        <div class="chart chart--bar-chart js-bar-chart"></div>
        <button class="js-bar-chart-update">Update</button>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.6.2.0.js"></script>
    <script>
        const defaults = {
  width: 500,
  height: 300,
  margin: {
    top: 15,
    right: 0,
    bottom: 35,
    left: 60 },

  axis: true,
  axisPadding: 5,
  tickSize: 10,
  barPadding: 10,
  ease: d3.easeLinear,
  nice: true,
  type: 'rounded' };


class BarChart {

  constructor(element, options) {
    Object.assign(this, defaults, options);

    this.element = element;
    this.init();
  }

  dimensions() {
    const { margin } = this;

    return [
    this.width - margin.left - margin.right,
    this.height - margin.top - margin.bottom];

  }

  init() {
    const { margin, tickSize, axisPadding } = this;
    const [innerWidth, innerHeight] = this.dimensions();

    this.graph = d3.select(this.element);

    const svg = this.svg = this.graph.
    append('svg').
    attr('width', this.width).
    attr('height', this.height).
    append('g').
    attr('transform', `translate(${margin.left}, ${margin.top})`.........完整代码请登录后点击上方下载按钮下载查看