代码拉取完成，页面将自动刷新
<!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 demo</title>
<link rel="stylesheet" href="./lib/viewer.css" />
<link rel="stylesheet" href="./css/base.css" />
</head>
<body>
<header>
<h1>my gallery</h1>
<ul>
<li>
<a href="index.html">d3.js 官方例子</a>
</li>
<li class="cur">
<a href="my.html">我的例子</a>
</li>
</ul>
</header>
<h2>折线图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-01.png" alt="">
<h3>
<a href="./my/01/examples/01-making-your-first-chart/index.html" target="_blank">折线图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-04e.gif" alt="">
<h3>
<a href="./my/01/examples/04-animations-and-transitions/4-draw-line/index.html" target="_blank">折线图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-05e.gif" alt="">
<h3>
<a href="./my/01/examples/05-interactions/4-line/index.html" target="_blank">折线图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-07a.png" alt="">
<h3>
<a href="./my/01/examples/07-data-visualization-basics/1-humidity-timeline/index.html" target="_blank">折线图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-08a.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/1-timeline/index.html"
target="_blank">折线图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/11.png" alt="">
<h3>
<a href="./my/03/static/11.html" target="_blank">折线图（v5版本）</a>
</h3>
</li>
</ul>
<h2>散点图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-02.png" alt="">
<h3>
<a href="./my/01/examples/02-scatterplot/index.html" target="_blank">散点图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-04f.gif" alt="">
<h3>
<a href="./my/01/examples/04-animations-and-transitions/5-draw-scatter/index.html" target="_blank">散点图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-08d.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/4-scatter/index.html" target="_blank">散点图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-10.gif" alt="">
<h3>
<a href="./my/01/examples/10-marginal-histogram/index.html" target="_blank">散点图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/23.png" alt="">
<h3>
<a href="./my/03/static/23.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
</ul>
<h2>柱形图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-03b.gif" alt="">
<h3>
<a href="./my/01/examples/03-bar-chart/index.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-04c.gif" alt="">
<h3>
<a href="./my/01/examples/04-animations-and-transitions/3a-draw-bars-with-css-transition/index.html"
target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-05b.gif" alt="">
<h3>
<a href="./my/01/examples/05-interactions/2-bars/index.html"
target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-08f.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/6-histogram/index.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/1.png" alt="">
<h3>
<a href="./my/03/static/1.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/2.png" alt="">
<h3>
<a href="./my/03/static/2.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/3.png" alt="">
<h3>
<a href="./my/03/static/3.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/5.png" alt="">
<h3>
<a href="./my/03/static/5.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/24.png" alt="">
<h3>
<a href="./my/03/static/24.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
</ul>
<h2>动画</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-04a.gif" alt="">
<h3>
<a href="./my/01/examples/04-animations-and-transitions/1-svg-animate/index.html" target="_blank">动画（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-04b.gif" alt="">
<h3>
<a href="./my/01/examples/04-animations-and-transitions/2-css-transition-playground/index.html"
target="_blank">动画（v5版本）</a>
</h3>
</li>
</ul>
<h2>事件</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-05a.gif" alt="">
<h3>
<a href="./my/01/examples/05-interactions/1-events/index.html"
target="_blank">事件（v5版本）</a>
</h3>
</li>
</ul>
<h2>细胞图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-05c.gif" alt="">
<h3>
<a href="./my/01/examples/05-interactions/3-scatter/index.html" target="_blank">细胞图（v5版本）</a>
</h3>
</li>
</ul>
<h2>地图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-06c.gif" alt="">
<h3>
<a href="./my/01/examples/06-making-a-map/index.html" target="_blank">地图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/19.png" alt="">
<h3>
<a href="./my/03/static/19.html" target="_blank">地图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/20.png" alt="">
<h3>
<a href="./my/03/static/20.html" target="_blank">地图（v5版本）</a>
</h3>
</li>
</ul>
<h2>其他</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-07b.png" alt="">
<h3>
<a href="./my/01/examples/07-data-visualization-basics/2-scales/index.html" target="_blank">其他（v5版本）</a>
</h3>
</li>
</ul>
<h2>日历图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-08b.gif" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/2-heatmap/index.html" target="_blank">日历图（v5版本）</a>
</h3>
</li>
</ul>
<h2>雷达图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-08c.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/3-radar/index.html" target="_blank">雷达图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/01/screenshots/example-11.gif" alt="">
<h3>
<a href="./my/01/examples/11-radar-weather-chart/index.html" target="_blank">雷达图（v5版本）</a>
</h3>
</li>
</ul>
<h2>环形图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-08e.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/5-pie/index.html" target="_blank">环形图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/25.png" alt="">
<h3>
<a href="./my/03/static/25.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
</ul>
<h2>箱盒图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-08g.png" alt="">
<h3>
<a href="./my/01/examples/08-common-charts/7-box-plot/index.html" target="_blank">箱盒图（v5版本）</a>
</h3>
</li>
</ul>
<h2>表格</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-09a.png" alt="">
<h3>
<a href="./my/01/examples/09-dashboard-design/index.html" target="_blank">表格（v5版本）</a>
</h3>
</li>
</ul>
<h2>桑基图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-12.gif" alt="">
<h3>
<a href="./my/01/examples/12-animated-sankey/index.html" target="_blank">桑基图（v5版本）</a>
</h3>
</li>
</ul>
<h2>面积图</h2>
<ul class="cons">
<li>
<img src="./my/03/img/4.png" alt="">
<h3>
<a href="./my/03/static/4.html" target="_blank">柱形图（v5版本）</a>
</h3>
</li>
</ul>
<h2>力导向图</h2>
<ul class="cons">
<li>
<img src="./my/03/img/6.png" alt="">
<h3>
<a href="./my/03/static/6.html" target="_blank">力导向图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/7.png" alt="">
<h3>
<a href="./my/03/static/7.html" target="_blank">力导向图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/8.png" alt="">
<h3>
<a href="./my/03/static/8.html" target="_blank">力导向图（v5版本）</a>
</h3>
</li>
</ul>
<h2>组合图</h2>
<ul class="cons">
<li>
<img src="./my/01/screenshots/example-13.gif" alt="">
<h3>
<a href="./my/01/examples/13-using-d3-with-react-js/index.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/02/01-caixin-nobel/demo.jpg" alt="">
<h3>
<a href="./my/02/01-caixin-nobel/index.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/02/02-eschers-gallery/demo.png" alt="">
<h3>
<a href="./my/02/02-eschers-gallery/index.html" target="_blank">组合图（v5版本）</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">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/10.png" alt="">
<h3>
<a href="./my/03/static/10.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/12.png" alt="">
<h3>
<a href="./my/03/static/12.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/13.png" alt="">
<h3>
<a href="./my/03/static/13.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/14.png" alt="">
<h3>
<a href="./my/03/static/14.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/15.png" alt="">
<h3>
<a href="./my/03/static/15.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/16.png" alt="">
<h3>
<a href="./my/03/static/16.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/17.png" alt="">
<h3>
<a href="./my/03/static/17.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/18.png" alt="">
<h3>
<a href="./my/03/static/18.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/21.png" alt="">
<h3>
<a href="./my/03/static/21.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/22.png" alt="">
<h3>
<a href="./my/03/static/22.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/26.png" alt="">
<h3>
<a href="./my/03/static/26.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/27.png" alt="">
<h3>
<a href="./my/03/static/27.html" target="_blank">组合图（v5版本）</a>
</h3>
</li>
</ul>
<h2>树图</h2>
<ul class="cons">
<li>
<img src="./my/03/img/9.png" alt="">
<h3>
<a href="./my/03/static/9.html" target="_blank">树图（v5版本）</a>
</h3>
</li>
<li>
<img src="./my/03/img/28.png" alt="">
<h3>
<a href="./my/03/static/28.html" target="_blank">树图（v5版本）</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>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手