如何解决d3 轮廓可观察到 Vanilla JS
我正在将 d3 轮廓示例 https://observablehq.com/@d3/volcano-contours?collection=@d3/d3-contour 转换为独立应用程序的 vanilla js。我是 observable 和 JS 的新手。
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-contour.v2.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
</head>
<body>
<div class="container"></div>
<script>
function vChart(container){
const data = FileAttachment("volcano.json").json();
const height = data.height;
const width = data.width;
const contours = d3.contours().size([width,height]);
const path = d3.geoPath();
function interpolateTerrain() {
const i0 = d3.interpolateHsvLong(d3.hsv(120,1,0.65),d3.hsv(60,0.90));
const i1 = d3.interpolateHsvLong(d3.hsv(60,0.90),d3.hsv(0,0.95));
return t => t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);
}
const color = d3.scaleSequential(interpolateTerrain).domain(d3.extent(data.values)).nice();
const thresholds = color.ticks(20);
const wide = Generators.observe(notify => {
let wide;
function resized() {
let w = innerWidth > 640;
if (w !== wide) notify(wide = w);
}
resized();
addEventListener("resize",resized);
return () => removeEventListener("resize",resized);
})
const svg = d3.select(container).append('svg')
.attr("viewBox",wide ? [0,width,height] : [0,height,width])
.style("display","block")
.style("margin","0 -14px")
.style("width","calc(100% + 28px)")
.style("height","auto");
const g = svg.append("g")
.attr("transform",wide ? null : `
rotate(90 ${width/2},${height/2})
translate(${(width - height) / 2},${(width - height) / 2})
`)
.attr("stroke","white")
.attr("stroke-width",0.03);
for (const threshold of thresholds) {
g.append("path")
.attr("d",path(contours.contour(data.values,threshold)))
.attr("fill",color(threshold));
yield svg.node();
}
}
vChart('.container')
</script>
</body>
</html>
这会导致两个错误
- 未捕获的引用错误:未定义文件附件
- 未捕获的引用错误:未定义生成器
我无法重新创建生成器函数,我猜它与 observable 相关的 Fileattachment 函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。