zoukankan      html  css  js  c++  java
  • d3.js 柱状图

    对比例尺的温习及第一次实战练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>d3_demo4</title>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <style>
        * {
          margin: 0;
          padding: 0;
          outline: none;
        }
        svg {
           100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <svg id="mainsvg"></svg>
    
      <script>
        const svg = d3.select('#mainsvg')
        const margin = {left: 50, top: 50, right: 50, bottom: 50}
        /**
         * 数据data
         */
        const data = [
          {
            name: '小吴',
            score: 80
          },
          {
            name: '小娇',
            score: 10
          },
          {
            name: '小婷',
            score: 30
          },
          {
            name: '小木',
            score: 60
          },
          {
            name: '小袁',
            score: 90
          },
          {
            name: '小何',
            score: 70
          }
        ]
    
        /**
         * 设置svg的kuan高
         */
        const width = window.innerWidth - margin.left - margin.right
        const height = window.innerHeight - margin.top - margin.bottom
        svg.attr('width', width)
        svg.attr('height', height)
        svg.style('background', '#cccccc')
    
        /**
         * 设置x轴和y轴的比例尺
         */
        const xScale = d3.scaleLinear().domain([0, d3.max(data.map(d => d.score))]).range([0, width]).nice()
        const yScale = d3.scaleBand().domain(data.map(d => d.name)).range([0, (height - margin.bottom)]).padding(0.1)
    
        const g = svg.append('g').attr('transform', `translate(${margin.left}, ${height})`)
        // 创建x轴和y轴
    
        // x轴
        const xAxis = d3.axisBottom(xScale)
        g.append('g').call(xAxis)
    
        // y轴
        const yAxis = d3.axisLeft(yScale)
        g.append('g').call(yAxis).attr('transform', `translate(0, -${height - margin.top})`)
    
        // 渲染数据
        g.append('g').attr('transform', `translate(0, -${height - margin.top})`).selectAll('rect').data(data)
          .enter()
          .append('rect')
          .attr('width', d => xScale(d.score))
          .attr('height', yScale.bandwidth())
          .attr('fill', '#28caff')
          .attr('y', d => yScale(d.name))
          .attr('opacity', 0.6)
    
      // 设置x轴和y轴的字体样式
       d3.selectAll('.tick text').attr('font-size', '1.5em').attr('color', 'purple')
    </script>
    </body>
    </html>
  • 相关阅读:
    〖教程〗Ladon提权MS16-135参数版(WIN7-2016)
    〖教程〗RDP会话劫持 Ladon无密码登陆管理员桌面会话
    Ladon for PowerShell远程加载教程
    〖教程〗NbtScan 139端口弱口令/Netbios密码爆破
    给你一个免费加入"小密圈"的机会
    活动目录(Active Directory,AD)的主要功能
    如何通过审计安全事件日志检测密码喷洒(Password Spraying)攻击
    mouseenter 和mouseover的区别
    如何获取可视区域宽高,获取元素到在文档中的位置
    闭包
  • 原文地址:https://www.cnblogs.com/wlgwilianm123/p/14075959.html
Copyright © 2011-2022 走看看