利用JS的D3库实现直方图

最新推荐文章于 2021-05-25 09:13:32 发布

pointerIsNULL

最新推荐文章于 2021-05-25 09:13:32 发布

阅读量2.7k

点赞数

分类专栏：云计算数据可视化

本文链接：https://blog.csdn.net/solzy/article/details/46474439

版权

本文介绍了如何运用D3.js这个JavaScript库来实现动态数据可视化的直方图，并展示了排序前后的效果，提供了可排序的功能。

摘要由CSDN通过智能技术生成

D3（Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。下面我们用D3 实现了可排序的直方图。


<!DOCTYPE html>
<meta charset="utf-8">
<style>

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    width: 960px;
  }

  .axis text {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .bar {
    fill: steelblue;
    fill-opacity: .9;
    text-anchor: start;
  }


  label {
    position: absolute;
    top: 10px;
    right: 10px;
  }

</style>

<body>
<label><input type="c