Javascript d3fc：将不同的数据传递给渲染方法

试着适应这个例子。有一点不同：我有更多的WebGL数据，因此根本不想将其传递给SVG渲染器。SVG渲染器应该只获得一个数据点，但这会随着用户移动鼠标而不断变化。是否可能有一个开关功能，它基本上起到连接的作用，并将两个完全不同的数组传递给同一绘图上的

svgPlotArea（）

和

webglPlotArea（）

简化的原始代码段一个绘图和两个渲染函数：

const rand=d3.randomInt（01100）；
常量数据=d3.range（100.map）（d=>({
x:rand（），
y:rand（）
}));
数据[50]。悬停=true；
设xScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设yScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设webglSeries=fc.seriesWebglPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.类型（d3.符号圆）
.defined（（）=>true）
.尺寸（（）=>100）
.equals（（prevData）=>prevData.length）；
设svgSeries=fc.seriesSvgPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.尺寸（（）=>300）
.类型（d3.符号星）
.定义（（d）=>d.悬停）；
设chart=fc.chart笛卡尔（xScale，yScale）
.webglPlotArea（webglSeries）
.SVG地块面积（SVG系列）；
函数render（）{
d3.选择（“div”）
.基准（数据）
.电话（图表）；
}
render（）
div{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
}
使用fc.seriesSvgMulti（）似乎很有可能，请参阅代码段。在控制台中，svgPlotArea的defined（）函数只处理一个节点


设rand=d3.randomInt（0100）；
让数据=d3.range（100.map）（d=>({
x:rand（），
y:rand（）
}));
设xScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设yScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设webglSeries=fc.seriesWebglPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.类型（d3.符号圆）
.defined（（）=>true）
.尺寸（（）=>100）
.equals（（prevData）=>prevData.length）；
设svgSeries=fc.seriesSvgPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.尺寸（（）=>300）
.类型（d3.符号星）
.defined（（d）=>{console.log（“节点检查”）；返回true}）；
设multi=fc.seriesSvgMulti（）
.系列（[svgSeries]）
.mapping（（数据、索引、系列）=>{
开关（系列[索引]）{
案例SVG系列：
返回getSingleNode（）；
}
});
设chart=fc.chart笛卡尔（xScale，yScale）
.webglPlotArea（webglSeries）
.svgPlotArea（多个）；
函数getSingleNode（）{
返回[数据[rand（）]]
}
函数render（）{
d3.选择（“div”）
.基准（数据）
.电话（图表）；
}
render（）
div{
位置：绝对位置；
宽度：100%；
身高：70%；
}
使用fc.seriesSvgMulti（）似乎很有可能，请参阅代码段。在控制台中，svgPlotArea的defined（）函数只处理一个节点


设rand=d3.randomInt（0100）；
让数据=d3.range（100.map）（d=>({
x:rand（），
y:rand（）
}));
设xScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设yScale=d3.scaleLinear（）
.domain（[01100]）
.范围（[01100]）；
设webglSeries=fc.seriesWebglPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.类型（d3.符号圆）
.defined（（）=>true）
.尺寸（（）=>100）
.equals（（prevData）=>prevData.length）；
设svgSeries=fc.seriesSvgPoint（）
.crossValue（d=>d.x）
.main值（d=>d.y）
.尺寸（（）=>300）
.类型（d3.符号星）
.defined（（d）=>{console.log（“节点检查”）；返回true}）；
设multi=fc.seriesSvgMulti（）
.系列（[svgSeries]）
.mapping（（数据、索引、系列）=>{
开关（系列[索引]）{
案例SVG系列：
返回getSingleNode（）；
}
});
设chart=fc.chart笛卡尔（xScale，yScale）
.webglPlotArea（webglSeries）
.svgPlotArea（多个）；
函数getSingleNode（）{
返回[数据[rand（）]]
}
函数render（）{
d3.选择（“div”）
.基准（数据）
.电话（图表）；
}
render（）
div{
位置：绝对位置；
宽度：100%；
身高：70%；
}

那么你的意思是，当鼠标移动时，应该调用
svgrender
，但不应该调用
webglRender
？不，可以也应该调用，我不介意，因为mousemove上的大数据不会改变。我想避免为了得到1个悬停元素而浏览大数据。我发现在同一个渲染器中可能存在悬停元素，例如，在不同的渲染器中可能存在悬停元素吗？不，恐怕不存在。当我删除
webglSeries
，render，然后再次添加它时，webgl内容在rendersanks Ruben期间被删除，我现在已经了解了这么多片段：）所以你的意思是，当鼠标移动时，应该调用
svgrender
，但是
webglRender
不应该？不，可以也应该被调用，我不介意mousemove上的大数据不会改变。我想避免为了得到1个悬停元素而浏览大数据。我发现在同一个渲染器中可能存在悬停元素，例如，在不同的渲染器中可能存在悬停元素吗？不，恐怕不存在。当我删除
webglSeries
时，呈现并再次添加webg