按范围限制时发出图形 tan(x)

Question

为此，我一直在使用 Vega 编辑器。

所以我最初有显示 sin 和 cos 的代码非常好，然后当我尝试添加 tan 时，我可以理解地遇到了一些比例问题，因为 tan 的 y 值在接近以下点时相对较大函数变为未定义。

为了解决这个问题，我在 tan 元素上添加了一个范围过滤器，但它似乎试图在它未定义时连接两边的点。出于某种原因，这也改变了罪恶线。

这是我目前的代码：

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Plots three functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
  "sequence": {
    "start": 0,
    "stop": 12.7,
    "step": 0.1,
    "as": "x"
  }
},
"transform": [
  {
    "calculate": "sin(datum.x)",
    "as": "sin(x)"
},
{
  "calculate": "cos(datum.x)",
  "as": "cos(x)"
},
{
  "calculate": "tan(datum.x)",
  "as": "tan(x)"
},
{
  "filter": {
    "field": "tan(x)",
    "range": [-1, 1]
  }
},
{
  "fold": [
    "sin(x)",
    "cos(x)",
    "tan(x)"
  ]
}
],
"mark": "line",
"encoding": {
  "x": {
    "type": "quantitative",
    "field": "x"
  },
  "y": {
    "field": "value",
    "type": "quantitative"
  },
  "color": {
    "field": "key",
    "type": "nominal",
    "title": null
  }
}
}

我怎样才能让这些数据不尝试连接点，而是让棕褐色线上升直到超出范围？我也不太清楚sin线是怎么回事，不加tan线就好了。

非常感谢任何帮助。

Answer 1

为避免在相邻点之间画一条线，您需要将每个线段分成一个单独的组：detail 编码对此很有用。不幸的是，这样的分组将应用于 all 受编码影响的行，因此要避免 sin(x) 和 cos(x) 曲线，您需要将切线拆分为单独的层。

以下是您可以执行此操作的方法 (open in editor)：

{
  "width": 300,
  "height": 150,
  "data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
  "transform": [
    {"calculate": "sin(datum.x)", "as": "sin(x)"},
    {"calculate": "cos(datum.x)", "as": "cos(x)"},
    {"calculate": "tan(datum.x)", "as": "tan(x)"},
    {"calculate": "floor(datum.x / PI - 0.5)", "as": "phase"}
  ],
  "encoding": {
    "x": {"type": "quantitative", "field": "x"},
    "y": {
      "field": "value",
      "type": "quantitative",
      "scale": {"domain": [-3, 3]}
    },
    "color": {"field": "key", "type": "nominal", "title": null}
  },
  "layer": [
    {"transform": [{"fold": ["sin(x)", "cos(x)"]}], "mark": "line"},
    {
      "transform": [{"fold": ["tan(x)"]}],
      "mark": {"type": "line", "clip": true},
      "encoding": {"detail": {"field": "phase", "type": "ordinal"}}
    }
  ]
}

按范围限制时发出图形 tan(x)

Issue graphing tan(x) when limiting it by range

javascript

range

vega-lite