拓十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

图表都做好了故事却乱,叙事节点怎样约束跳转

图表都做好了故事却乱,叙事节点怎样约束跳转

数据故事工作室里,用户增长趋势、区域贡献结构和季度预测都已经画好了。把三张图按创建顺序排列并不一定是一个故事:预测页可能依赖前面解释过的区域拆分,读者却可以直接跳过去,看到结论却不知道依据。

我把每一页当成叙事节点,节点除了引用图表,还声明进入条件和下一步分支。编辑区允许调整顺序,预览区只沿着合法边跳转。

图表和叙事节点不是同一个对象

exportinterfaceChartAsset{id:stringtitle:stringtype:'line'|'bar'|'donut'|'area'dataRevision:number}exportinterfaceStoryNode{id:stringchartId:stringheadline:stringbody:stringrequiresNodeIds:string[]nextNodeIds:string[]}exportinterfaceStoryState{currentNodeId:stringvisitedNodeIds:string[]}

同一张图可以被不同节点引用:第一次用于说明趋势,第二次用于和预测叠加。节点拥有文案与关系,图表只负责数据表达。

编辑时先防止关系成环

如果 A 依赖 B、B 又依赖 A,预览永远找不到起点。新增边前检测目标是否已经能回到起点。

exportfunctionreaches(nodes:StoryNode[],fromId:string,targetId:string):boolean{constvisited=newSet<string>()constwalk=(id:string):boolean=>{if(id===targetId)returntrueif(visited.has(id))returnfalsevisited.add(id)constnode=nodes.find((item:StoryNode)=>item.id===id)returnnode?node.nextNodeIds.some(walk):false}returnwalk(fromId)}exportfunctioncanLink(nodes:StoryNode[],fromId:string,toId:string):boolean{returnfromId!==toId&&!reaches(nodes,toId,fromId)}

编辑器拒绝成环关系时,保留用户当前的节点选择并提示是哪条边冲突,不把整张故事图重置。

预览只进入条件满足的节点

exportfunctioncanEnter(state:StoryState,node:StoryNode):boolean{returnnode.requiresNodeIds.every((id:string)=>state.visitedNodeIds.includes(id))}exportfunctionmoveTo(state:StoryState,nodes:StoryNode[],nextId:string):StoryState{constnext=nodes.find((item:StoryNode)=>item.id===nextId)if(!next||!canEnter(state,next))returnstateconstvisited=state.visitedNodeIds.includes(nextId)?state.visitedNodeIds:[...state.visitedNodeIds,nextId]return{currentNodeId:nextId,visitedNodeIds:visited}}

读者在预览里点击“查看预测”时,若还没有经过“区域贡献结构”,页面展示该节点的摘要入口,而不是空白跳转。

数据更新后标记受影响节点

季度预测使用的数据字段变了,引用它的节点不能继续显示“已确认”。节点记录图表版本,预览前检查引用版本。

exportinterfaceNodeBinding{nodeId:stringchartId:stringchartRevision:number}exportfunctionisStale(binding:NodeBinding,chart:ChartAsset):boolean{returnbinding.chartId===chart.id&&binding.chartRevision!==chart.dataRevision}

数据更新后,编辑器把受影响节点标为“待复核”,文案不会被自动改写。用户确认新数据仍支持原结论,再更新绑定版本。

故事结构、图表关系和预览进度分开后,拖动图表卡片只影响编辑排版,不会把阅读路径弄乱。后续接入真实数据源时,每次更新只需提升dataRevision,叙事节点就能明确指出哪些结论需要重新检查。

返回列表