master

分支 (2)

管理

管理

master

develop

d3.js-gallery
/
3d.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3.js 3d</title>
    <link rel="stylesheet" href="./lib/viewer.css" />
    <link rel="stylesheet" href="./css/base.css" />
</head>

<body>

    <header>
        <h1>3d demo</h1>
        <ul>
            <li>
                <a href="index.html">d3.js 官方例子</a>
            </li>
            <li class="cur">
                <a href="3d.html">3d 例子</a>
            </li>
        </ul>
    </header>
    <h2>3d 图形</h2>
    <ul class="cons">
        <li>
            <img src="./3d/img/1.png" alt="">
            <h3>
                <a href="./3d/1.html" target="_blank">3d 甜甜圈（v3版本）</a>
            </h3>
        </li>
        <li>
            <img src="./my/02/03-traditional-colors-3d-dataviz/demo.png" alt="">
            <h3>
                <a href="./my/02/03-traditional-colors-3d-dataviz/index.html" target="_blank">组合3d图（v5版本）</a>
            </h3>
        </li>
        <li>
            <img src="./3d/img/2.png" alt="">
            <h3>
                <a href="./3d/2.html" target="_blank">3d 力导向-svg（v3）</a>
            </h3>
        </li>
        <li>
            <img src="./3d/img/3.png" alt="">
            <h3>
                <a href="./3d/3.html" target="_blank">3D  条形图 （v4）</a>
            </h3>
        </li>
        <li>
            <img src="./3d/img/4.png" alt="">
            <h3>
                <a href="./3d/4.html" target="_blank">3D 散点图 （v4）</a>
            </h3>
        </li>
        <li>
            <img src="./3d/img/5.png" alt="">
            <h3>
                <a href="./3d/5.html" target="_blank">3D 曲面 （v4）</a>
            </h3>
        </li>
        <li>
            <img src="./3d/img/6.png" alt="">
            <h3>
                <a href="./3d/6.html" target="_blank">3D 云 （v4）</a>
            </h3>
        </li>
    </ul>
    <div id="nav"></div>
</body>
<script src="./lib/viewer.js"></script>
<script>
    class Demo {
        constructor() {
            this.name = 'demo'
            this.nav = document.querySelector('#nav')
            this.list = [].slice.call(document.querySelectorAll('body h2'))
            this.title = document.querySelector('h1')
            this.start()
        }

        start() {
            this.createNav()
            this.imgViewer()
        }

        createNav() {
            let html = `
                <ul>
                    ${this.getListHtml()}
                </ul>
            `

            this.nav.innerHTML = html
        }

        getListHtml() {
            let str = ''
            this.title.innerHTML = this.title.innerHTML + '(收录数量' + [].slice.call(document.querySelectorAll('img')).length + ')'
            this.list.forEach((value) => {
                value.id = Math.ceil(Math.random() * 1000000)
                str += `<li><a href="#${value.id}">${value.innerHTML}</a></li>`
            })

            return str
        }

        imgViewer() {
            [].slice.call(document.querySelectorAll('img')).forEach((elm) => {
                const viewer = new Viewer(elm, {
                    // inline: true,
                    viewed() {
                        // viewer.zoomTo(1);
                    },
                });
            })
        }
    }


    new Demo()
</script>

</html>