用新数据更新pixi.js scatterplot

问题描述 投票:1回答:1

我正在尝试使用pixi.js创建我的第一个动画散点图,我不明白如何使用click-event上的新数据更新它(newdata存储在“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);

    }

我将不胜感激任何帮助

scatter-plot pixi.js
1个回答
0
投票

我认为DOM-to-Canvas using D3WORKING WITH D3.JS AND CANVAS: WHEN AND HOW可以帮助你更好,你可以使用虚拟dom d3的数据输入更新。

<custom class="group" width="960" height="500">
  <custom class="circle" scale="1"></custom>
  <custom class="circle" scale="1"></custom>
  …
</custom:sketch>

浏览器会忽略这些元素,因为它们存在于我们的“自定义”命名空间中。为了渲染它们,我们使用一个迭代子元素并将它们绘制到canvas元素的计时器。

你可以使用d3.select('custom.group').selectAll('custom.circle').data(data),那么你将有entereixt。喜欢:

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){
       ...
   })
})

希望对你有所帮助

© www.soinside.com 2019 - 2024. All rights reserved.