d3fc:将不同的数据传递给呈现方法

Question

尝试改编this示例。有一点不同:我有更多的WebGL数据，因此根本不想把它传递给SVG呈现器。SVG渲染器应该只获得一个数据点，但随着用户移动鼠标，这个数据点会不断变化。有没有可能有一个开关函数，它基本上充当交叉点，并将两个完全不同的数组传递给同一图上的svgPlotArea()和webglPlotArea()中的每一个？

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

​

const rand = d3.randomInt(0, 100);

const data = d3.range(100).map(d => ({
  x: rand(),
  y: rand()
}));

data[50].hover = true;

let xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 100]);

let yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 100]);

let webglSeries = fc.seriesWebglPoint()
  .crossValue(d => d.x)
  .mainValue(d => d.y)
  .type(d3.symbolCircle)
  .defined(() => true)
  .size(() => 100)
  .equals((prevData) => prevData.length);

let svgSeries = fc.seriesSvgPoint()
  .crossValue(d => d.x)
  .mainValue(d => d.y)
  .size(() => 300)
  .type(d3.symbolStar)
  .defined((d) => d.hover);

let chart = fc.chartCartesian(xScale, yScale)
  .webglPlotArea(webglSeries)
  .svgPlotArea(svgSeries);


function render() {
  d3.select("div")
    .datum(data)
    .call(chart);
}

render();

div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/d3fc"></script>


<div>
</div>

​

一个肮脏的黑客代码片段，包含两个相互重叠的独立图和独立的数据：

​

const rand = d3.randomInt(0, 100);

const big_data = d3.range(100).map(d => ({
  x: rand(),
  y: rand()
}));

const hover_data = [{
  x: 27,
  y: 11
}, ];

let xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 100]);

let yScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 100]);

let webglSeries = fc.seriesWebglPoint()
  .crossValue(d => d.x)
  .mainValue(d => d.y)
  .type(d3.symbolCircle)
  .defined(() => true)
  .size(() => 100)
  .equals((prevData) => prevData.length);

let svgSeries = fc.seriesSvgPoint()
  .crossValue(d => d.x)
  .mainValue(d => d.y)
  .size(() => 300)
  .type(d3.symbolStar)
  .defined(() => true);

let glchart = fc.chartCartesian(xScale, yScale)
  .webglPlotArea(webglSeries);

let svgchart = fc.chartCartesian(xScale, yScale)
  .svgPlotArea(svgSeries);

function render() {
  d3.select("#gl")
    .datum(big_data)
    .call(glchart);

  d3.select("#svg")
    .datum(hover_data)
    .call(svgchart);
}

render();

div {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/d3fc"></script>


<div>
  <div id="gl">
  </div>
  <div id="svg">
  </div>
</div>

​

有没有更好的方法，比如下面的伪代码？

const chart = d3fc.chartCartesian(xScale, yScale)
                  .svgPlotArea(svgSeries)
                  .webglPlotArea(webglSeries)

d3.select( "div" )
  .datum( function() { return whichRenderer ? data1 : data2 } )
  .call(chart);

Answer 1

通过使用fc.seriesSvgMulti()似乎是很有可能的，请看代码片段。在控制台中，svgPlotArea的defined()函数只处理一个节点

​

let rand = d3.randomInt(0,100);

let data = d3.range(100).map(d => ({
    x: rand(),
    y: rand()
}));

let xScale = d3.scaleLinear()
               .domain([0, 100])
               .range([0, 100]);

let yScale = d3.scaleLinear()
               .domain([0, 100])
               .range([0, 100]);

let webglSeries = fc.seriesWebglPoint()
                 .crossValue(d => d.x)
                 .mainValue(d => d.y)
                 .type(d3.symbolCircle)
                 .defined( () => true )
                 .size( () => 100 )
                 .equals( (prevData) => prevData.length );

let svgSeries = fc.seriesSvgPoint()
                 .crossValue(d => d.x)
                 .mainValue(d => d.y)
                 .size( () => 300 )
                 .type(d3.symbolStar)
                 .defined( (d) => { console.log("node check"); return true } );

let multi = fc.seriesSvgMulti()
                .series([svgSeries])
                 .mapping((data, index, series) => {
                     switch (series[index]) {
                         case svgSeries:
                             return getSingleNode();
                     }
                 });

let chart = fc.chartCartesian(xScale, yScale)
    .webglPlotArea(webglSeries)
    .svgPlotArea(multi);

function getSingleNode() {
  return [data[rand()]]
}

function render() {
  d3.select( "div" )
    .datum( data )
    .call(chart);
}

render();

div {
  position: absolute;
  width: 100%;
  height: 70%;
}

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/d3fc"></script>

<div>
</div>

​