一个超级简单d3入门案例

最新推荐文章于 2024-05-07 21:34:26 发布

四阶张量

最新推荐文章于 2024-05-07 21:34:26 发布

阅读量849

点赞数 4

分类专栏：可视化文章标签： d3.js javascript 可视化 html5

本文链接：https://blog.csdn.net/qq_45549336/article/details/106692071

版权

可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

D3.js是一个JavaScript库，用于根据数据处理文档。D3可帮助您使用HTML，SVG和CSS使数据栩栩如生。D3对Web标准的重视为您提供了现代浏览器的全部功能，而又不会使自己陷入专有框架，而是结合了强大的可视化组件和数据驱动的DOM操作方法。

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
    <p>原始1</p>
    <p>原始2</p>
    <p>原始3</p>
    <button id="datum">datum</button>
    <button id="data">data</button>
    <script>
        //注意以下的dom都不是从document中获取，而是在d3中获取
        const body = d3.select('body');
        const p = body.selectAll('p');

        function doDatum() {
            const str = 'fw';
            //对p标签进行修改
            p.datum(str);
            p.text((d, i) => {
                return `${d}--${i}`
            })
        };
        function doData() {
            const dataSet = ['c++', 'javascript', 'java'];
            p.data(dataSet);
            p.text((d, i) => {
                return `${d}--${i}`
            })
        };

        const datum = document.getElementById('datum')
        const data = document.getElementById('data')
        datum.onclick = function () {
            doDatum()
        };
        data.onclick = function () {
            doData()
        }

    </script>
</body>

</html>