如何实现漏斗图带状过渡条与柱状条的精准平滑衔接?
漏斗图带状过渡条衔接优化需求
我正在制作漏斗图,希望通过平滑的带状过渡条实现各柱状条间的自然过渡。但目前带状条默认连接柱状条的垂直中心,我需要将其起止点偏移半个柱状条的厚度,以实现与柱状条边角的平滑衔接。数据集存在用于切换分类的字段参数,现寻求解决方案。
当前效果截图

当前使用的Vega-Lite配置代码
{ "data": {"name": "dataset"}, "transform": [ { /* DYNAMIC FIELD MAPPING: Replace 'Faculty', 'Department', etc. with the exact internal names of your field parameter options */ "calculate": "isDefined(datum['Academic Level']) ? datum['Academic Level'] : isDefined(datum['Department']) ? datum['Department'] : isDefined(datum['Faculty']) ? datum['Faculty'] : isDefined(datum['Domicile']) ? datum['Domicile'] : isDefined(datum['Disability']) ? datum['Disability'] : isDefined(datum['Fee Status']) ? datum['Fee Status'] : isDefined(datum['Gender']) ? datum['Gender'] : isDefined(datum['IMD']) ? datum['IMD'] : isDefined(datum['POLAR4_quintile']) ? datum['POLAR4_quintile'] : isDefined(datum['MOA']) ? datum['MOA'] : 'Other'", "as": "SelectedLegend" }, { "stack": "Sum of Value", "groupby": ["AttSort"], "as": ["x0", "x1"], "offset": "center", /* Use the new 'SelectedLegend' field for sorting and grouping */ "sort": [{"field": "SelectedLegend", "order": "descending"}] }, { "calculate": "(datum.x0 + datum.x1) / 2", "as": "label_midpoint" } ], "layer": [ { "description": "RIBBONS", "mark": {"type": "area", "interpolate": "monotone", "opacity": 0.6, "orient": "horizontal"}, "encoding": { "y": {"field": "AttSort", "type": "ordinal"}, "x": {"field": "x0", "type": "quantitative"}, "x2": {"field": "x1"}, "detail": {"field": "SelectedLegend"}, "color": {"field": "SelectedLegend", "type": "nominal", "sort": "descending"} } }, { "description": "BARS", "mark": {"type": "bar", "height": {"band": 0.5}}, "encoding": { "y": {"field": "AttSort", "type": "ordinal"}, "x": {"field": "x0", "type": "quantitative"}, "x2": {"field": "x1"}, "color": {"field": "SelectedLegend", "type": "nominal", "sort": "descending"} } }, { "description": "DATA LABELS", "mark": { "type": "text", "baseline": "middle", "fontSize": 10, "fontWeight": "bold", "color": "white" }, "encoding": { "y": {"field": "AttSort", "type": "ordinal"}, /* Reference the new calculated field here */ "x": { "field": "label_midpoint", "type": "quantitative" }, /* Detail is required to split labels into their colored segments */ "detail": {"field": "SelectedLegend"}, "text": { "field": "Sum of Value", "type": "quantitative", "format": ".2s" } } } ], "config": { "view": {"stroke": "transparent"}, /* Hides background grid and cleans up the bottom axis */ "axis": { "grid": false, "domain": false, "ticks": false, "title": null, "labelFontSize": 10 } } }
内容的提问来源于stack exchange,提问作者Epic Triffid
相关产品推荐
相关产品推荐

