Setting Graphics x, y values not consistent with first render (pixi.js: ^4.3.0)

Running live here https://alex-wilmer.github.io/pixitest/

https://github.com/alex-wilmer/pixitest/blob/master/src/index.js

I’ve created 3 Text nodes and 3 Graphics (circles). I’m using the exact same dynamic scale (d3.scaleLinear) to zoom in, and reset on button clicks.

When I click the “zoom” button, the Text nodes behave as I would suspect, expanding to the right a bit, and hitting “reset” puts them back where they started.

The Graphics, on the other hand, jump much further as if it was on its own larger stage, interestingly enough, hitting “zoom” doesn’t set them back to their original position, but what seems to be original on this odd larger scale.

let ticks = []

let drawCircles = ({ data, scaleX, scaleY }) => {
  for (let [k, v] of data) {
    let [x, y] = xy(k)

    v.graphic = circle({
      color: 0x123456,
      x: scaleX(x),
      y: scaleY(y),
      r: 4,
    })

    stage.addChild(v.graphic)

    let sx = scaleX(x)
    let txt = text(sx)
    txt.x = sx
    txt.y = 10
    stage.addChild(txt)
    ticks.push({ x, text: txt })
  }
}

let mutateCircles = ({ data, scaleX }) => {
  for (let [k, v] of data) {
    let [x, y] = xy(k)

    // use the exact same scaleX(x) value for graphic.x and text.x
    v.graphic.x = scaleX(x)
    ticks.find(q => q.x === x).text.x = scaleX(x)
  }
}

code that creates the renderer. https://github.com/alex-wilmer/pixitest/blob/master/src/view.js

I’ve tried forcing webgl and canvas and get the same behaviour for both.

circle function, nothing fancy here:

https://github.com/alex-wilmer/pixitest/blob/master/src/circle.js

import { Graphics } from 'pixi.js'

export default ({
  color,
  x,
  y,
  r,
}) => {
  let s = new Graphics()

  s.beginFill(color)
  s.drawCircle(x, y, r)
  s.endFill()

  return s
}

Let me know if I can add anything else, or help out in any ways.

oh and if someone can tell me why it’s so blurry, that would be great too, thanks.

[staff0rd]

This sets graphics.x on init; http://codepen.io/staff0rd/pen/wgvBaw?editors=1010

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.