Force Transform Extends Chart Canvas

[PBI-David]

The force transform, specifically the x and y forces, seem to be doing some strange things to the chart positioning on the canvas. Below is a minimum reproducible example.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",

  "width": 800,
  "height": 800,
  "padding": 0,
  
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
       {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
               {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250},
        {"x": 250, "y": 250}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": [0,500],
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "domain": [0,500],
      "reverse": true,
      "range": "height"
    },
    {
      "name": "color",
      "type": "linear",
      "nice": true,
      "domain": {"data": "table", "field": "x"},
      "range": {"scheme": "turbo"}
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],
  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "size": {"value": 145},
          "fill": {"scale": "color", "field": "x"}
        },
        "update": {
          "strokeWidth": {"value": 10},
          "tooltip": {"signal": "item"},
          "stroke": {"value": "transparent"},
          "xfocus": {
            "scale": "x",
            "signal": "random() *500"
          },
          "yfocus": {
            "scale": "y",
            "signal": "random()*500"
          }
        }
      },
      "transform": [
        {
          "type": "force",
          "restart": true,
          "iterations": 800,
          "alphaMin": 0.00001,
          "static": false,
          "forces": [
            {"force": "x", "x": "xfocus", "strength": 1},
            {"force": "y", "y": "yfocus", "strength": 1}
          ]
        }
      ]
    }
  ]
}

If you change the strength of the x and y forces in the above spec to 0.1, the following happens (observe position of axes gets shifted down and right creating white space at the top and left). The more particles in combination with very high or very low but equal x and y strengths make the problem even more apparent. I have a chart where I currently have to create a negative left and right padding to fit on the canvas.

[PBI-David]

Closing as I have now realised the solution to this is to set clip = true.