堆栈内存溢出
  简体   繁体   English

Vega-lite：概述中的线标记不一致+详细的响应图表

[英]Vega-lite: line mark not consistent in overview+ detailed responsive chart

 原文  2022-07-13 06:49:06  4   1    javascript/ charts/ vega-lite/ vega

问题描述

 <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.8"></script> </head> <body> <div id="vis"/> <script> const spec = { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "name": "source_0", "data": { "values": [ {"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21"}, {"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21"}, {"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21"}, {"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21"}, {"Items": "8", "Items_Rate": "0.45", "Month": "May-21"}, {"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21"}, {"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21"}, {"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21"}, {"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21"}, {"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21"}, {"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21"}, {"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21"} ] }, "vconcat": [ { "width": 850, "height": 250, "layer": [ { "mark": {"type": "bar", "size": 50, "tooltip": true}, "transform": [{"filter": {"param": "brush"}}], "encoding": { "x": { "field": "Month", "type": "ordinal", "sort": null, "scale": {"domain": {"param": "brush"}, "zero": true}, "axis": { "title": "", "labelAngle": 360, "tickSize": 20, "position": 0 } }, "y": { "field": "Items", "type": "quantitative", "axis": {"tickMinStep": 1} }, "color": { "datum": "No. of Items", "scale": {"range": ["#0065ad"]} }, "tooltip": [ {"field": "Month", "type": "nominal", "title": "Month"}, { "field": "Items", "type": "quantitative", "title": "No. of Items" } ] } }, { "mark": { "type": "line", "point": {"shape": "square", "size": "50"}, "size": "2", "tooltip": true }, "transform": [{"filter": {"param": "brush"}}], "encoding": { "x": { "field": "Month", "type": "nominal", "title": "", "sort": null, "scale": {"domain": {"param": "brush"}} }, "y": { "field": "Items_Rate", "type": "quantitative", "title": "Items", "scale": {"zero": false}, "sort": null }, "color": { "datum": "Items Rate", "scale": {"range": ["black"]}, "legend": {"symbolType": "square"} }, "tooltip": [ {"field": "Month", "type": "nominal", "title": "Month"}, { "field": "Items_Rate", "type": "quantitative", "title": "Rate" } ] } } ], "resolve": { "scale": { "y": "independent", "shape": "independent", "color": "independent", "size": "independent" } } }, { "width": "850", "height": 100, "mark": "bar", "params": [ { "name": "brush", "select": {"type": "interval", "encodings": ["x"], "translate": true} } ], "encoding": { "x": { "field": "Month", "type": "nominal", "sort": null, "axis": {"title": "", "labels": false, "ticks": false} }, "y": { "field": "Items", "type": "quantitative", "axis": { "tickCount": 3, "grid": false, "title": "", "labels": false, "ticks": false } }, "color": {"value": "#0065ad"} } } ], "config": { "axisY": {"minExtent": 40}, "legend": { "orient": "top", "layout": {"top": {"anchor": "middle"}}, "labelFont": "arial", "titleFont": "arial" } } }; vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn); </script> </body> </html>

It can also be viewed in Vega lite editor here:也可以在 Vega lite 编辑器中查看：
https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json

My query is that when I select 4 or more graphs and scroll forwards, everything is working properly.我的疑问是，当我选择 4 个或更多图表并向前滚动时，一切正常。 However when I scroll the same backwards, the line graphs becomes incorrect.但是，当我向后滚动时，折线图变得不正确。
Instead of the nearest point creating a line to join the newly visible point, the farthest or the second-last visible graph now is joining the points.不是最近的点创建一条线来连接新的可见点，而是最远或倒数第二个可见图形现在正在连接这些点。

How could I change the code to have only the nearest point join with the new point and not the order of how they became visible?如何更改代码以仅使最近的点与新点连接，而不是它们变得可见的顺序？

For example, in the screenshot below, the Sept-21 point should join the Aug-21 point and NOT Nov-21 when I take the scroll backwards.例如，在下面的屏幕截图中，当我向后滚动时，Sept-21 点应该加入 Aug-21 点而不是 Nov-21 点。

在此处输入图像描述 Thank you for the help.感谢您的帮助。

1 个解决方案

解决方案1
 1 已采纳  2022-07-13 10:38:44

You need a sort field.您需要一个排序字段。 I added an index and used that but you can use anything you like.我添加了一个索引并使用了它，但你可以使用任何你喜欢的东西。

Editor 编辑

   {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "name": "source_0",
      "data": {
        "values": [
          {"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21", "Index":1},
          {"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21", "Index":2},
          {"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21", "Index":3},
          {"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21", "Index":4},
          {"Items": "8", "Items_Rate": "0.45", "Month": "May-21", "Index":5},
          {"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21", "Index":6},
          {"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21", "Index":7},
          {"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21", "Index":8},
          {"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21", "Index":9},
          {"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21", "Index":10},
          {"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21", "Index":11},
          {"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21", "Index":12}
        ]
      },
    
      "vconcat": [
        {
          "width": 850,
          "height": 250,
          "layer": [
            {
              "mark": {"type": "bar", "size": 50, "tooltip": true},
              "transform": [{"filter": {"param": "brush"}}],
              "encoding": {
                "x": {
                  "field": "Month",
                  "type": "ordinal",
                  "sort": null,
                  "scale": {"domain": {"param": "brush"}, "zero": true},
                  "axis": {
                    "title": "",
                    "labelAngle": 360,
                    "tickSize": 20,
                    "position": 0
                  }
                },
                "y": {
                  "field": "Items",
                  "type": "quantitative",
                  "axis": {"tickMinStep": 1}
                },
                "color": {"datum": "No. of Items", "scale": {"range": ["#0065ad"]}},
                "tooltip": [
                  {"field": "Month", "type": "nominal", "title": "Month"},
                  {
                    "field": "Items",
                    "type": "quantitative",
                    "title": "No. of Items"
                  }
                ]
              }
            },
            {
              "mark": {
                "type": "line",
                "point": {"shape": "square", "size": "50"},
                "size": "2",
                "tooltip": true
              },
              "transform": [{"filter": {"param": "brush"}}],
              "encoding": {
                "x": {
                  "field": "Month",
                  "type": "nominal",
                  "title": "",
                  "sort": {"field": "Index"},
                  "scale": {"domain": {"param": "brush"}}
                },
                "y": {
                  "field": "Items_Rate",
                  "type": "quantitative",
                  "title": "Items",
                  "scale": {"zero": false},
                  "sort": null
                },
                "color": {
                  "datum": "Items Rate",
                  "scale": {"range": ["black"]},
                  "legend": {"symbolType": "square"}
                },
                "tooltip": [
                  {"field": "Month", "type": "nominal", "title": "Month"},
                  {"field": "Items_Rate", "type": "quantitative", "title": "Rate"}
                ]
              }
            }
          ],
          "resolve": {
            "scale": {
              "y": "independent",
              "shape": "independent",
              "color": "independent",
              "size": "independent"
            }
          }
        },
        {
          "width": "850",
          "height": 100,
          "mark": "bar",
          "params": [
            {
              "name": "brush",
              "select": {"type": "interval", "encodings": ["x"], "translate": true}
            }
          ],
          "encoding": {
            "x": {
              "field": "Month",
              "type": "nominal",
              "sort": null,
              "axis": {"title": "", "labels": true, "ticks": false}
            },
            "y": {
              "field": "Items",
              "type": "quantitative",
              "axis": {
                "tickCount": 3,
                "grid": false,
                "title": "",
                "labels": false,
                "ticks": false
              }
            },
            "color": {"value": "#0065ad"}
          }
        }
      ],
      "config": {
        "axisY": {"minExtent": 40},
        "legend": {
          "orient": "top",
          "layout": {"top": {"anchor": "middle"}},
          "labelFont": "arial",
          "titleFont": "arial"
        }
      }
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Vega-lite：折线图。 从 y 轴域线开始线标记 - Vega-lite: Line chart. start line mark from the y-axis domain line 在Vega-Lite中的概述+细节显示上应用选择 - Apply selection on overview+detail display in Vega-Lite 从 Vega-lite 中的分组条形图中删除空值 - Remove empty values from grouped bar chart in Vega-lite Vega lite：线型标记不连续问题 - Vega lite: Line type mark discontinuous issue 使用 react-vega 和 vega-lite 获取点击标记数据 - Get clicked mark data using react-vega and vega-lite Vega-Lite中的平行坐标？ - Parallel coordinates in Vega-Lite? vega-lite：可调选择？ - vega-lite: Adjustable selection? 如何使用 Vega/Vega-lite 渲染类/组织/流程/状态图/图表 - How to render class/org/flow/state chart/diagrams with Vega / Vega-lite Vega-lite：更改堆叠条形图中的堆叠顺序并忽略负值 - Vega-lite: Change order of stacks in a stacked bar chart and ignore negative value 将字段设置为数组中的 object，Vega-lite - Setting a field to an object in an array, Vega-lite
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM