主页 / coding / 问题 / 78611213
Accepted
Vlad
Asked: 2024-06-12 15:37:38 +0800 CST

Deneb (Vega lite) 在过滤时修复了 hconcat 宽度

  • 772

当与 Vega Lite 中的 hconcat 连接时，如何修复视觉效果的宽度，以使其在过滤时不会移动？

我已经width在 hconcat 列表中为我的视觉效果设置了值，期望它们会保持在固定位置，但是在过滤（切片）图表时它们似乎会移动。

我需要修复它们以与仪表板页面上的其他视觉效果对齐。

以下是示例，Vega Lite 图表由两个水平条形图的 hconcat 组成。注意 x = 0（条形图的起始位置）的水平位置。

为了观察水平位置如何变化，我在 x = 0 起始位置上方添加了一个带有红色边框和透明填充的矩形。 全部 3 个类别

如果不进行切片，红色矩形会接触到边缘上的条形图，并与 x = 0 标签相交。当我在“b”上进行切片时，条形图和红色矩形之间会出现间隙。（仅执行了切片操作，没有移动任何内容，等等）。 b类

放大：放大

在这个玩具例子中，变化不是很大，我不确定是什么原因造成的，所以我不知道如何修改它以使间隙看起来更大，然而在我的实际使用情况下，变化非常明显。

以下是示例代码：

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "calculate": "if(datum.yval == 'top', datum.xval, 0)",
      "as": "top_val"
    },
    {
      "calculate": "if(datum.yval == 'bottom', datum.xval, 0)",
      "as": "bottom_val"
    }
  ],
  "hconcat": [
    {
      "width": 300,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "bottom_val",
              "type": "quantitative",
              "sort": "descending"
            },
            "y": {"field": "category"}
          }
        }
      ]
    },
    {"width": 50, "mark": "text"},
    {
      "width": 300,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "top_val",
              "type": "quantitative"
            },
            "y": {
              "field": "category",
              "axis": {"title": null, "labels": false}
            }
          }
        }
      ]
    }
  ]
}

我不确定如何从 powerbi 中的表格转换为 json，因此这里将其复制粘贴为 csv：

category,xval,yval
a,100,top
a,13,bottom
b,2,bottom
b,30,top
c,80,top
c,90,bottom

这是PBIX 文件的链接。它有一个切片器和上面的图表。单击切片器中的“b”，观察右侧图表上 x = 0 的水平位置移动。如何通过切片使其保持在原位？

powerbi

1 个回答

  1. Best Answer

    尝试设置 minExtent。例如

    {
  "data": {"name": "dataset"},
  "bounds": "flush",
  "align": "each",
  "spacing": 0,

  "transform": [
    {
      "calculate": "if(datum.yval == 'top', datum.xval, 0)",
      "as": "top_val"
    },
    {
      "calculate": "if(datum.yval == 'bottom', datum.xval, 0)",
      "as": "bottom_val"
    }
  ],
  "hconcat": [
    {
      "width": 100,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "bottom_val",
              "type": "quantitative",
              "sort": "descending"
            },
            "y": {"field": "category", "axis":{"minExtent": 40}}
          }
        }
      ]
    },
    {
      "width": 200,
      "layer": [
        {
          "mark": {"type": "bar", "fill":"red"}
     
        }
      ]
    },
    {
      "width": 100,
      "layer": [
        {
          "mark": {"type": "bar"},
          "encoding": {
            "x": {
              "field": "top_val",
              "type": "quantitative"
            },
            "y": {
              "field": "category",
              "axis": null
            }
          }
        }
      ]
    }
  ]
}
    • 1

相关问题