2

对 Vega 来说相当新，但功能很可爱。但是，我遇到了一个我已经坚持了几天的路障。我正在创建一个基于 vega 游乐场中的 parallel_coords 示例的图表。但是，我需要将其扩展为处理 2 种情况：

  1. 该图表更像是一种流程可视化，因此并非每个值都会延续到下一个阶段/部分。
  2. 我还想显示另一个值的每个阶段的幅度，类似于勉强的例子。

这是我的示例代码，它有点像几乎和 parallel_coords 之间的合并。如果您查看以下代码的结果，目前我遇到了 2 个问题：

  1. 线条应从 y 轴的最小值开始绘制。我尝试了根据图表宽度计算偏移量的想法，但是由于我在字段之间添加了填充，这似乎不起作用。
  2. 辅助 y 轴未缩放到绘制的值。如果您查看底层，y 轴上的最大值由所有数据点的最大值（在本例中为 40）表示。我要做的是使每个辅助轴彼此独立，以便它们可以根据给定的数据正确缩放。

感谢您的时间！

{
  "width": 1000,
  "height": 500,
  "data": [
    {
      "name": "line-data",
      "values": [
        {"id": "0","yAxis": 0,"xAxis": 1438387199999},
        {"id": "0","yAxis": 1,"xAxis": 1441065599999},
        {"id": "1","yAxis": 0,"xAxis": 1446335999999},
        {"id": "1","yAxis": 1,"xAxis": 1459468799999},
        {"id": "2","yAxis": 0,"xAxis": 1438387199999},
        {"id": "2","yAxis": 1,"xAxis": 1446335999999},
        {"id": "3","yAxis": 0,"xAxis": 1456790399999}
      ]
    },
    {
      "name": "bar-data",
      "values": [
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 10,
          "year": 2000,
          "xAxis": 1438387199999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 20,
          "year": 2000,
          "xAxis": 1441065599999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 0,
          "year": 2000,
          "xAxis": 1443657599999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 30,
          "year": 2000,
          "xAxis": 1446335999999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 10,
          "year": 2000,
          "xAxis": 1448927999999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 20,
          "year": 2000,
          "xAxis": 1451606399999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 0,
          "year": 2000,
          "xAxis": 1454284799999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 40,
          "year": 2000,
          "xAxis": 1456790399999
        },
        {
          "id": "10",
          "yAxis": 0,
          "yAxis2": 10,
          "year": 2000,
          "xAxis": 1459468799999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 7,
          "year": 2001,
          "xAxis": 1438387199999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 2,
          "year": 2001,
          "xAxis": 1441065599999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 2,
          "year": 2001,
          "xAxis": 1443657599999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 5,
          "year": 2001,
          "xAxis": 1446335999999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 10,
          "year": 2001,
          "xAxis": 1448927999999
        },
        {
          "id": "11",
          "yAxis": 1,
          "yAxis2": 3,
          "year": 2001,
          "xAxis": 1451606399999
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "yAxisScale",
      "type": "ordinal",
      "range": "height",
      "padding": 0.5,
      "domain": [0,1]
    },
        {
      "name": "yAxisScaleFlight",
      "type": "ordinal",
      "range": "height",
      "padding": 0.5,
            "points": true,
      "domain": [0,1]
    },
    {
      "name": "xAxisScale",
      "type": "ordinal",
      "nice": true,
      "range": "width",
      "domain": [
        1438387199999,
        1441065599999,
        1443657599999,
        1446335999999,
        1448927999999,
        1451606399999,
        1454284799999,
        1456790399999,
        1459468799999
      ]
    }
  ],
  "axes": [
    {
      "type": "x",
      "scale": "xAxisScale",
      "offset": {"scale": "yAxisScale","value": 0}
    },
    {
      "type": "x",
      "scale": "xAxisScale",
      "offset": {"scale": "yAxisScale","value": 1}
    }
  ],
  "marks": [
    {
      "name": "yAxiss",
      "type": "group",
      "from": {
        "data": "bar-data",
        "transform": [{"type": "facet","groupby": ["yAxis"]}]
      },
      "scales": [
        {
          "name": "yAxiScale2",
          "range": "height",
          "zero": false,
          "round": true,
          "padding": 1.2,
          "domain": {"data": "bar-data","field": "yAxis2"}
        }
      ],
      "axes": [
        {
          "type": "y",
          "scale": "yAxiScale2",
          "tickSize": 0,
          "properties": {"axis": {"stroke": {"value": "transparent"}}}
        }
      ],
      "properties": {
        "enter": {
          "x": {"value": 0.5},
          "y": {"scale": "yAxisScale","field": "key"},
          "height": {"scale": "yAxisScale","band": true},
          "width": {"field": {"group": "width"}}
        }
      },
      "marks": [
        {
          "type": "rect",
          "properties": {
            "enter": {
              "x": {"scale": "xAxisScale","field": "xAxis"},
              "y": {"scale": "yAxiScale2","field": "yAxis2"},
              "y2": {"scale": "yAxiScale2","value": 0},
              "width": {
                "scale": "xAxisScale",
                "band": true,
                "offset": -1
              }
            },
            "update": {"fill": {"value": "steelblue"}}
          }
        }
      ]
    },
    {
      "from": {
        "transform": [{"type": "facet","groupby": ["id"]}],
        "data": "line-data"
      },
      "type": "group",
      "marks": [
        {
          "type": "line",
          "properties": {
            "enter": {
              "y": {"scale": "yAxisScale","field": "yAxis"},
              "x": {"scale": "xAxisScale","field": "xAxis"},
              "stroke": {"value": "steelblue"},
              "strokeWidth": {"value": 1}
            }
          }
        }
      ]
    }
  ]
}
4

0 回答 0