Question

我正在尝试使用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);

    }

我将不胜感激

Answer 1

我认为DOM-to-Canvas using D3和WORKING 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)，然后您将拥有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){
       ...
   })
})

希望对您有帮助

使用新数据更新pixi.js散点图

1 个答案: