Question

Vega相当新，但功能可爱。然而，我遇到了一个障碍，我已经坚持了几天。我正在创建一个基于vega playground中的parallel_coords示例的图表。但是，我需要扩展它来处理2个案例：

图表更像是流动视觉，因此并非每个值都会贯穿到下一个阶段/部分。
我还希望在每个阶段显示另一个值的幅度，类似于几乎没有例子。

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

线应该以y轴的最小值开始绘制。我尝试了根据图表宽度计算偏移量的想法，但由于我在字段之间添加填充，这似乎不起作用。
辅助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}
            }
          }
        }
      ]
    }
  ]
}

Vega有多个y轴和多个图表的问题

0 个答案: