我尝试在单击按钮时将新图表添加到画布。当我直接调用函数
addChartindex.html
<html>
<head>
<script src="//unpkg.com/[email protected]/dist/d3.min.js"></script>
<script src="//unpkg.com/[email protected]/build/d3fc.js"></script>
</head>
<body>
<button id="#button">Add Chart</button>
<canvas id="line-webgl"></canvas>
<script src="/src/chart3.js" type="module"></script>
</body>
</html>
chart3.js
const width = 500, height = 250;
const xScale = d3.scaleLinear()
.domain([0, 50])
.range([0, width]);
const yScale = d3.scaleLinear()
.domain([0, 1])
.range([height, 0]);
const canvasgl = d3.select('#line-webgl').node();
canvasgl.width = width;
canvasgl.height = height;
const gl = canvasgl.getContext('webgl');
// the webgl series component that renders data, transformed
// using D3 scales, onto a WebGL context
const webglLine = fc.seriesWebglLine()
.xScale(xScale)
.yScale(yScale)
.crossValue((_, i) => i)
.mainValue(d => d)
.context(gl);
export const addChart = () => {
const data = d3.range(0, 50).map(d => Math.random());
webglLine(data);
}
addChart();
addChart();
addChart();
/* somehow clears canvas on click, only one chart is drawing */
document.getElementById('#button').onclick = addChart;
我希望在单击按钮时添加新图表，但旧图表也可见，但只有一个图表可见
理解 Javascript 中的
Global ScopeFunction Scope// THESE FUNCTION CALLS ARE IN SAME SCOPE
addChart();
addChart();
addChart();
/// BUT THIS FUNCTION CREATE NEW FUNCTION SCOPE WHEN IT IS CALLED
document.getElementById('#button').onclick = addChart;
// LIKE THIS
() => {
addChart();
}
...
在全局范围内调用
addChart()