svg/d3.js折线图展示数据

最新推荐文章于 2024-04-11 00:37:10 发布

youyou_builder

最新推荐文章于 2024-04-11 00:37:10 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/youyouyouyou44/article/details/82457402

版权

本文介绍了作者初次接触d3.js并使用它制作折线图的经历。通过理解并调整网上的示例代码，作者完成了自己的SVG折线图，并分享了最终效果和源代码，作为学习笔记以便日后参考。

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

初次接触d3.js，能感觉到它的强大，想要完全搞懂还是要花一番功夫，最近用它画了个折线图作为入门，以后还要多学习，请大家指教。
这个例子是在网上找到的，然后自己看懂这些代码的意思，小调整了一下，作为笔记出现，方便下次参考。
首先看一下效果图：

image.png

以下为源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>d3折线图</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="d3.v3.min.js"></script>
    <style>

        body {
            font: 10px sans-serif;
            margin: 50px;
        }

        .grid .tick {
            stroke: lightgrey;
            opacity: 0.7;
            shape-rendering: crispEdges;
        }

        .grid path {
            stroke-width: 0;
        }

        .axis path {
            fill: none;
            stroke: #bbb;
            shape-rendering: crispEdges;
        }

        .axis text {
            fill: #555;
        }

        .axis line {
            stroke: #e7e7e7;
            shape-rendering: crispEdges;
        }

        .axis .axis-label {
            font-size: 14px;
        }

最低0.47元/天解锁文章

youyou_builder

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
svg/d3.js折线图展示数据

初次接触d3.js，能感觉到它的强大，想要完全搞懂还是要花一番功夫，最近用它画了个折线图作为入门，以后还要多学习，请大家指教。这个例子是在网上找到的，然后自己看懂这些代码的意思，小调整了一下，作为笔记出现，方便下次参考。首先看一下效果图：image.png以下为源代码：&lt;!DOCTYPE html&gt;&lt;html&...
复制链接

扫一扫