vega-lite - Vega-lite条形图cornerRadiusEnd发生在负值的轴端

Question

我绘制了带有负值的水平条形图，当我将边缘四舍五入时，对于负侧，它发生在轴侧

    {"mark": {"type": "bar", 
           "cornerRadiusEnd": 100
           }},

顶部栏的圆度应该在另一边，是否可以这样做 https://vega.github.io/vega-lite/examples/bar_negative_horizo​​ntal_label.html

还

"align": {"expr": "datum.mean < 0 ? 'right' : 'left'"},

不工作，如果平均值小于零，它是正确的，但对于正值，它也是正确 的

"align": {"expr": "datum.mean < 0 ? 'left' : 'right'"},

如何在里面获取两个值？

标签： vega-litevega

Answer 1

该cornerRadius部分应该可以使用 来实现expr，我尝试fill根据条件显示不同的颜色，但它不适用于cornerRadius配置，这可能是一个错误。我认为您尝试过的同样的事情也适用align于您提供的条形图示例，但是没有您的配置，我无法理解为什么align它不适合您。

您可以查看下面的示例代码或编辑器：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart with negative values. We can hide the axis domain line, and instead use a conditional grid color to draw a zero baseline.",
  "data": {
    "values": [
      {"a": "A", "b": -28},
      {"a": "B", "b": 55},
      {"a": "C", "b": -33},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53},
      {"a": "G", "b": -19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52}
    ]
  },
  "config2": {"mark": {"cornerRadius": 20}},
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "domain": false,
        "ticks": false,
        "labelAngle": 0,
        "labelPadding": 4
      }
    },
    "x": {
      "field": "b",
      "type": "quantitative",
      "scale": {"padding": 20}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "cornerRadiusEnd": {"expr": "datum.b < 0 ? 0 : 80"},
        "fill": {"expr": "datum.b < 0 ? 'red' : 'green'"},
        "cornerRadiusBottomRight": {"expr": "datum.b < 0 ? 40 : 0"},
        "cornerRadiusTopRight": {"expr": "datum.b < 0 ? 40 : 0"}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": {"expr": "datum.b < 0 ? 'right' : 'left'"},
        "dx": {"expr": "datum.b < 0 ? -2 : 2"}
      },
      "encoding": {"text": {"field": "b", "type": "quantitative"}}
    }
  ]
}