零基础自学前端 D3.js 初体验03 柱状图+排序

最新推荐文章于 2021-12-07 19:19:28 发布
最新推荐文章于 2021-12-07 19:19:28 发布
阅读量163 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：https://my.oschina.net/u/3388416/blog/896573
版权

零基础自学前端 D3.js 初体验03 柱状图+排序

<!DOCTYPE html>

<html>

 

<head>

  <meta charset="utf-8">

  <title>d3</title>

</head>

<script src="https://d3js.org/d3.v4.min.js"></script>

 

<body>

 

  <button type="button" name="button" οnclick="mySort()">排序</button>

  <button type="button" name="button" οnclick="myAdd()">添加数据</button>

</body>

<script type="text/javascript">

  var width = 1000,

    height = 400,

    dataset = [50, 90, 124, 86, 73, 64, 110, 107],

    padding = {

      top: 20,

      right: 20,

      bottom: 20,

      left: 20

    },

    rectWidth = 30,

    rectStep = 35;

  var svg = d3.select("body")

    .append("svg")

    .attr("width", width)

    .attr("height", height)

 

  var rect = svg.selectAll("rect")

    .data(dataset)

    .enter()

    .append("rect")

    .attr("fill", "red")

    .attr("x", function(d, i) {

      return padding.left + i * rectStep;

    })

    .attr("y", function(d) {

      return height - padding.bottom - d;

    })

    .attr("width", rectWidth)

    .attr("height", function(d) {

      return d;

    });

 

  var text = svg.selectAll("text")

    .data(dataset)

    .enter()

    .append("text")

    .attr("fill", "aqua")

    .attr("font-size", "14px")

    .attr("text-anchor", "middle")

    .attr("x", function(d, i) {

      return padding.left + i * rectStep;

    })

    .attr("y", function(d) {

      return height - padding.bottom - d

    })

    .attr("dx", rectWidth / 2)

    .attr("dy", "1em")

    .text(function(d) {

      return d;

    });

 

  function draw() {

    var updateRect = svg.selectAll("rect")

      .data(dataset);

    var enterRect = updateRect.enter();

    var exitRect = updateRect.exit();

 

    var updateText = svg.selectAll("text")

      .data(dataset);

    var enterText = updateText.enter();

    var exitText = updateText.exit();

 

    updateRect.attr("fill", "red")

      .attr("x", function(d, i) {

        return padding.left + i * rectStep;

      })

      .attr("y", function(d) {

        return height - padding.bottom - d;

      })

      .attr("width", rectWidth)

      .attr("height", function(d) {

        return d;

      });

    enterRect.append("rect")

      .attr("fill", "red")

      .attr("x", function(d, i) {

        return padding.left + i * rectStep;

      })

      .attr("y", function(d) {

        return height - padding.bottom - d;

      })

      .attr("width", rectWidth)

      .attr("height", function(d) {

        return d;

      });

    exitRect.remove();

 

    updateText.attr("fill", "aqua")

      .attr("font-size", "14px")

      .attr("text-anchor", "middle")

      .attr("x", function(d, i) {

        return padding.left + i * rectStep;

      })

      .attr("y", function(d) {

        return height - padding.bottom - d

      })

      .attr("dx", rectWidth / 2)

      .attr("dy", "1em")

      .text(function(d) {

        return d;

      });

    enterText.append("text")

      .attr("fill", "aqua")

      .attr("font-size", "14px")

      .attr("text-anchor", "middle")

      .attr("x", function(d, i) {

        return padding.left + i * rectStep;

      })

      .attr("y", function(d) {

        return height - padding.bottom - d

      })

      .attr("dx", rectWidth / 2)

      .attr("dy", "1em")

      .text(function(d) {

        return d;

      });

    exitRect.remove();

  }

 

​

  function mySort() {

    dataset.sort(d3.ascending);

    draw();

  }

 

  function myAdd() {

    dataset.push(Math.floor(Math.random() * 100));

    draw();

 

  }

</script>

 

</html>

 

零基础自学前端，你要的学习资料到了-498854752

转载于:https://my.oschina.net/u/3388416/blog/896573

chenlaojie7596
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
D3js-对柱状图的增，删，排序
六月心悸
07-01 1960
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">          D3 增加 删除 排序 柱状图  
d3_v5.js绘制柱状图(可添加数据和实现排序功能)
weixin_62268437的博客
12-20 382
这是博主用d3.js第一次绘制的图形，可以实现数据的添加和排序的功能，里面用到了线性比例尺和颜色比例尺等知识，后面都打了备注，因为时间的原因就不一个一个展开说了，源码放在下面，方便我管理也。
d3.js柱状图
10-26
d3.js柱状图gif图片
D3.js 柱状图排序，增加删除，乱序操作
bieliwuguiqi的博客
12-07 737
const height = 500; const width = 1000; const margin = 2; const gap = 5; // 矩形之间的间隔 const data = [8, 56, 76, 21, 46, 98, 40, 72, 54, 68, 100]; // 需要绘制的数据，初始时随机给一些值 const my_svg = d3.select('#my_svg') .style('margin-top', '10px') .attr('width', w.
零基础自学PLC入门.pdf
11-16
零基础自学PLC入门.pdf
零基础自学PLC入门.zip
05-25
1 无线射频，手机电路，电视家电，信号处理，电源电路等电路图应有尽有。 2 PCB使用教程，PCB使用技巧，PCB布线规则，PCB layout经验资料丰富精彩。 3 各类电子课件，电子教材，测量仪表，嵌入式技术，制造技术收藏...
D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）
03-26
D3.js，全称Data-Driven Documents，是由Mike Bostock开发的一款强大的JavaScript库，用于创建数据驱动的文档。这个库允许开发者通过HTML、SVG和CSS来操作数据，实现复杂的数据可视化。对于想要深入学习D3.js的人来...
React零基础自学手册.pdf
最新发布
03-31
前端react零基础自学手册，包会，零基础自学手册，本人亲自编写的完整的，包会，非常详细，Lesson 1 - React.js 简介 Lesson 2 - 前端组件化（⼀）：从⼀个简单的例⼦讲起 Lesson 3 - 前端组件化（⼆）：优化 DOM ...
d3.js一个可排序，增加，删除的柱状图
weixin_40863414的博客
04-26 309
这是一个小demo，对于学习d3.js的过渡，sort等有帮助： 文章地址： 添加链接描述
D3.js 绘制立体柱状图
You_Ta的博客
02-18 4106
绘制效果图如下： 绘制思路： 将立体柱状图拆分为顶部与侧面，并分别用 path 路径绘制。 拆分后的顶部和侧边的绘制顺序如图所示： // 基础配置 const svgObj = { // svg画布大小 width: 300, height:300 } const width = 20; const height = 60; // 柱体高度 con...
D3.js实现带动画效果的柱状图
Eiwen的博客
04-08 3912
&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;zh-cn&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;g
d3.js画柱状图超详细教程
qq5q13638的博客
11-27 4764
d3.js画柱状图超详细教程 废话不说了，有文本编辑器和浏览器就行。 先看效果图 1. 本地创建一个文件夹，名字随便 2. 如何创建一个用于画d3的空白html？ 在文件夹中新建文本文件，将后缀改为.html <!doctype html> <html> <head> <title>D3.js基础教程</title> <script src="https://d3js.org/d3.v5.min.js" charset=
d3.js——单柱体柱状图（v5）
weixin_42095871的博客
08-13 300
一、页面中引入相关函数 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial...
d3中文案例_D3.js柱状图例子
weixin_33552698的博客
12-24 406
创建一个容器let svg = d3.select("body").append("svg") //在body中添加一个svg容器.attr("height", height) //设置宽高.attr("width", width);let tooltip=d3.select("body") //添加一个div，主要用来显示数据提示.appe...
d3.js+react实现算法可视化：排序篇
liuyaqi1993的博客
05-19 4983
前言： 知道d3.js已经很长时间了，直到去年才好好看了一些教程写了一些demo，当时还是3.x版。最近这几天在看react、react-router之类的，想自己写些东西出来，刚好想到该复习下d3.js，自己就做了这个算法可视化的demo，目前只做了排序，包括冒泡排序、插入排序、选择排序、归并排序、快速排序，之后有时间的话会继续做其他的数据结构与算法的可视化。 目前有很多算法可视化的网站，比
jsp怎么做柱状图_js实现柱状图
weixin_42339759的博客
12-29 1905
怎样实现柱状图每个柱子显示不一样的文字(js)你得先获取到节点，然后再修改里面的内容。js中charts中怎么设置在柱状图上方显示对应的数值？我在label中设置了显示，最后图形上方还是没有数据，CSS布局HTML小编今天和大家分享大神帮帮忙 var M itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上...
零基础自学高等数.pdf
09-20
《零基础自学高等数学.pdf》是一本帮助零基础学习高等数学的自学教材。该教材的主要特点是适合初学者，无论你是否有数学基础，都可以从这本教材中开始学习。 这本教材首先从基础开始，通过清晰的解释和丰富的例题，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值