如何在 Vega d3 图表中设置最小 x 轴而不是 0

Question

我指的是 preview 中提供的代码之后的 VEGA 图表。 "domain": [0, 3] 用于设置 x 和 y 轴的范围。在这里，如果我设置 [-0.5, 3]，x 轴将从 -0.5 开始，但如果我想要正数，例如 0.5，x 轴将不会从该值开始，而是从 0 开始。有没有其他选择如何解决这个问题？

{
  "name": "image",
  "width": 200,
  "height": 200,
  "padding": {"left":30, "top":10, "bottom":30, "right":10},
  "data": [
    {
      "name": "data",
      "values": [
        {"x":0.5, "y":0.5, "img":"data/ffox.png"},
        {"x":1.5, "y":1.5, "img":"data/gimp.png"},
        {"x":2.5, "y":2.5, "img":"data/7zip.png"}
      ]
    }
  ],
  "scales": [
    {"name": "x", "domain": [0, 3], "range": "width"},
    {"name": "y", "domain": [0, 3], "range": "height"}
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "image",
      "from": {"data": "data"},
      "properties": {
        "enter": {
          "url": {"field": "data.img"},
          "width": {"value": 50},
          "height": {"value": 50},
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"}
        },
        "update": {
          "opacity": {"value": 1.0}
        },
        "hover": {
          "opacity": {"value": 0.5}
        }
      }
    }
  ]
}

Answer 1

添加属性 "zero"：天平为假

"scales": [
{"name": "x", "domain": [0, 3], "range": "width", "zero": false},
{"name": "y", "domain": [0, 3], "range": "height"}
  ]

如何在 Vega d3 图表中设置最小 x 轴而不是 0

How to set minimum x-Axis instead of 0 in Vega d3 charts

javascript

vega