利用JS的D3库实现直方图

最新推荐文章于 2022-05-06 21:21:26 发布

原创

最新推荐文章于 2022-05-06 21:21:26 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

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

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: