scatter-plot - 用新数据更新 pixi.js 散点图
问题描述
我正在尝试使用 pixi.js 创建我的第一个动画散点图,但我不明白如何使用点击事件的新数据更新它(新数据存储在“newDaraForUpdate”变量中)。
我正在寻找类似 d3 通用更新模式的东西,它允许将一个数据重绘到另一个数据并删除不必要的点或在必要时附加新点。这是我的代码:
var parseDate = d3.timeParse("%Y-%m-%d");
var $windowWidth = $(window).width();
var $windowHeight = $(window).height();
PIXI.utils.skipHello(); // remove pixi message in console log
var app = new PIXI.Application($windowWidth, $windowHeight, {transparent:true, resolution:1});
$('#canvas-container').append(app.view);
d3.csv("data/data.csv", function(chartData){
chartData.forEach(function (d) {
d.completion = parseDate(d.completion)
});
preparedData = chartData.filter(function(d) {
return d.service === "1";
});
newDaraForUpdate = chartData.filter(function(d) {
return d.service === "2";
});
var xScale = fc.scaleDiscontinuous(d3.scaleTime())
.discontinuityProvider(fc.discontinuitySkipWeekends());
xScale.domain([parseDate("2017-01-01"), parseDate("2017-12-31")])
.range([0, $windowWidth]);
var yScale = d3.scaleLinear()
.domain([0, 160])
.range([$windowHeight, 0]);
var particleColors = d3.scaleOrdinal() // D3 Version 4
.domain(["1", "2", "3", "4"])
.range(["cccccc", "E58903", "7EB852", "ff0702"]);
var particleCount = preparedData.length;
var particleSettings;
preparedData.forEach(function(d) {
particleSettings = {
particleSize: 10,
x: xScale(d.registration),
y: yScale(d.counterTotal),
scale: 0.2,
alpha: 0.7,
particleSpeed: 1,
color: particleColors(d.color)
};
createParticle(particleSettings);
});
function createParticle() {
var graphic = new PIXI.Graphics(); // create graphic
graphic.beginFill('0x' + particleSettings.color);
graphic.drawCircle(0, 0, particleSettings.particleSize); // (x, y, radius) // gets scaled as a sprite later
graphic.endFill();
var texture = graphic.generateCanvasTexture(); // create texture using graphic (scaleMode, resolution)
texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; // scale mode for pixelation
var particleSprite = new PIXI.Sprite(texture); // create particle using texture
particleSprite.interactive = true; // enable mouse and touch events
particleSprite.buttonMode = true; // show hand cursor on mouseover
particleSprite.anchor.set(0.5); // center anchor point
particleSprite.blendMode = PIXI.BLEND_MODES.SCREEN;
TweenMax.set(particleSprite, {
pixi: {
x: particleSettings.x,
y: particleSettings.y,
scale: particleSettings.scale,
alpha: particleSettings.alpha
}
}, 0);
app.stage.addChild(particleSprite);
}
我将不胜感激
解决方案
我认为DOM-to-Canvas 使用 D3并使用 D3.JS 和 CANVAS:何时以及如何更好地帮助您,您可以使用虚拟 dom 进行 d3 的数据输入更新。
<custom class="group" width="960" height="500">
<custom class="circle" scale="1"></custom>
<custom class="circle" scale="1"></custom>
…
</custom:sketch>
浏览器会忽略这些元素,因为它们存在于我们的“自定义”命名空间中。为了渲染它们,我们使用了一个定时器,它遍历子元素并将它们绘制到画布元素上。
你可以使用d3.select('custom.group').selectAll('custom.circle').data(data)
,那么你将拥有enter
,eixt
。喜欢:
d3.select('canvas').on('click',function(){
let update = d3.select('custom.group').selectAll('custom.circle').data(data);
update.enter()...;
update.exit()...
})
然后你可以使用定时器,如:
d3.timer(function(){
d3.selectAll('custom.circle').each(function(d){
...
})
})
希望对你有帮助