обновить график рассеяния pixi.js новыми данными

Question

Я пытаюсь создать свой первый анимированный график рассеяния с помощью pixi.js, и я не понимаю, как обновить его новыми данными по событию click (новые данные хранятся в переменной "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);

    }

Буду благодарен за любую помощь

Answer 1

Я думаю DOM-to-Canvas с использованием D3 и РАБОТА С D3.JS И CANVAS: КОГДА И КАК может помочь вам лучше, вы можете использовать виртуальный DOM для d3`sdata enter update.

<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), тогда у вас будет 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){
       ...
   })
})

надеюсь, что это поможет вам