在VSCode中可视化数据结构

VSCode调试可视化工具是一个VSCode扩展，允许您在编辑器中可视化数据结构。这对于在调试期间可视化监视的值非常有用。我发现这个扩展可以帮助可视化绘图、表格、数组、直方图和树。

安装扩展后，打开一些相关脚本，然后导航到命令面板并转到Debug Visualizer：new View。此视图允许您在单步执行代码时输入可视化的表达式。它与VS Code的手表视图非常相似，核心区别在于结果是可视化的，而不是以文本格式显示。

如果您有要可视化的文本选择，则“调试可视化工具：将所选内容用作表达式”可以计算您在上次打开的调试可视化工具窗口中选择的当前文本。

VSCode Debug Visualizer的JavaScript示例包含在主存储库中。要开始使用它们，请检查是否安装了纱线和节点，然后：

运行纱线以安装依赖项。为了让一切正常工作，我需要手动运行sprain add@hediate/debug-visual alizer-data-提取器。

现在，您应该能够在提示符中输入Visualize()，并在编辑器中查看双向链接列表的绘图可视化：

在您自己的示例中尝试该扩展之前，请注意，您希望可视化的表达式的计算结果必须为JSON对象字符串，并且必须与扩展支持的可视化工具之一的模式匹配(在简单数据类型之外，如数组)。在下面的示例中，请注意作为此架构一部分的"；Kind"；：{"；graph"；：true}、"；Kind"；：{"；plotly"；：true}等条目。

下面您可以找到我在测试扩展时使用的一些代码片段。

常量范围=[1，2，33，31，1，2，63,943,346，24,123，6，32]；

可视化的数据不需要是静态的。如下面的fetch()示例所示，它也可以来自rest API。

Const Example1={"；Kind"；：{"；graph"；：true}，"；Nodes"；：[{"；id"；："；1"；，"；Label"；："；1"；}，{"；id"；："；2"；，"；标签"；："；2"；，"；颜色"；：："；橙色"；}，{"；id"；："；3"；，"；标签"；："；3"；}]，"；边缘"；：[{"；从"；："；1"；，"；至"；："；2"；，"；颜色"；："；红色"；}，{"；自"；："；1"；，"；至"；："；3"；}}；

常量表={"；种类"；：{"；表"；：true}，"；行"；：[{"；userid"；：1，"；Country"；："；us"；，"；Amount"；：2}，{"；userid"；：2，"；国家"；："；即"；，"；金额"；：1}，{"；userid"；：2，"；国家"；："；de"；，"；金额"；：1}，{"；userid"；：1，"；国家"；："；美国"；}]}；

"；Kind"；：{"；plotly"；：true}允许您利用Ploly图表和数据科学库进行可视化。

常量示例2={"；种类"；：{"；plotly"；：true}，"；数据"；：[{"；y"；：[67，58，62，65，72]，"；名称"；："；生产"；}，{"；y"；：[69，55，67，68，73]，"；名称"；："；分段"；}}；

函数culteHistgraph(){const x1=[]；const x2=[]；const y1=[]；const y2=[]；设k=0；for(设i=1；i<；500；i++){k=数学。随机()；x1。推(k*5)；x2。推(k*10)；y1。推(K)；推(Y2)。Push(k*2)；}const trace1={x：x1，y：y1，name：'；control'；，autobinx：false，histNorm："；count"；，标记：{color："；rgba(255,100,102，0.7)"；，行：{color："；rgba(255,100,102，1)"；，width：1}}，不透明度：0.5，类型："；直方图"；，xbin：{结束：2.8，大小：0.06，开始：。5}}；常量轨迹2={x：x2，y：y2，autobinx：false，标记：{color："；rgba(100,200,102，0.7)"；，行：{color："；rgba(100,200,102，1)"；，宽度：1}}，名称："；实验"；，不透明度：0.75，类型："；直方图"；，xbin：{结束：4，大小：0.06，开始：-3.2}}；返回{"；种类"；：{"；plotly"；：true}，"；数据"；：[trace1，trace2]，"；布局"；：{barap：0.05，bargroupap：0.2，barmode："；Overlay"；，Title："；采样结果"；，X轴：{Title："；Value"；}，y轴：{Title："；count"；}let example3=culteHistgraph()；

//生成随机数据设a=[]；设b=[]；设c=[]；设a_=0；设b_=0；设c_=0；for(设i=0；i<；50；i++){a_=Math。随机的；随机的。Push(A_)；b_=数学。随机()；b.。Push(B_)；c_=数学。Random()；c.。PUSH(C_)；}//绘制网格常量示例4={"；Kind"；：{"；plotly"；：true}，"；data"；：[{opacity：0.8，color：'；rgb(300,100,200)'；，type：'；mesh3d'；，x：A，y：B，z：C，}]}；

常量示例5={"；种类"；：{"；plotly"；：true}，"；数据"；：{Values：[19，26，55]，标签：['；Work'；，'；Gym'；，'；Rest'；]，类型：'；Pie'；}，"；Layout"；：{高度：400，宽度：400}}；

感谢Henning Dieterichs创建了这个扩展。如果您觉得这很有帮助，您可能还会有兴趣尝试一下他也编写的dra.io VSCode扩展。