如何通过Kusto Explorer/Web UI绘制Vertices+Edges表的网络图？

方法1：导出数据到本地工具可视化 #

• 直接导出Vertices和Edges表的数据为CSV格式：在Kusto Explorer或Web UI的查询结果面板，点击「导出」按钮，选择CSV格式保存。
• 使用本地工具渲染：
  • Python（NetworkX+Matplotlib）：用以下代码加载导出的CSV并绘图：

    import pandas as pd
    import networkx as nx
    import matplotlib.pyplot as plt
    
    # 读取导出的顶点和边数据
    vertices = pd.read_csv("vertices.csv")
    edges = pd.read_csv("edges.csv")
    
    # 构建图结构
    G = nx.Graph()
    G.add_nodes_from(vertices.itertuples(index=False, name=None))
    G.add_edges_from(edges[["SourceId", "TargetId"]].itertuples(index=False, name=None))
    
    # 绘制网络图
    nx.draw(G, with_labels=True, node_size=500, font_size=10)
    plt.show()
    

  • Power BI：导入两个CSV表，建立SourceId/TargetId与Vertices表Id的关联，然后添加「Network Navigator」等自定义视觉对象生成交互式网络图。
  • Gephi：专业的网络图分析工具，直接导入CSV数据即可生成丰富的可视化效果。

方法2：Kusto Web UI仪表盘自定义HTML/JS可视化 #

Kusto Dashboard支持添加自定义HTML部件，可通过D3.js直接在UI内渲染网络图：

1. 编写Kusto查询，将顶点和边数据合并为JSON格式：

   union 
   (Vertices | project type = "node", id = Id, label = Label, props = pack_all()),
   (Edges | project type = "link", source = SourceId, target = TargetId, props = pack_all())
   | summarize graph_data = make_list(pack_all())
   | project json_str = tostring(graph_data)
   

2. 在Kusto Dashboard中添加「自定义HTML」部件，绑定上述查询的结果，然后插入以下D3.js代码（{{json_str}}会自动替换为查询返回的JSON数据）：

   <div id="network-container" style="width: 100%; height: 600px;"></div>
   <script src="https://d3js.org/d3.v7.min.js"></script>
   <script>
     // 解析Kusto返回的图数据
     const rawData = JSON.parse('{{json_str}}');
     const nodes = rawData.filter(item => item.type === "node");
     const links = rawData.filter(item => item.type === "link");
   
     const svg = d3.select("#network-container")
       .append("svg")
       .attr("width", "100%")
       .attr("height", "100%");
   
     // 力导向图模拟
     const simulation = d3.forceSimulation(nodes)
       .force("link", d3.forceLink(links).id(d => d.id))
       .force("charge", d3.forceManyBody().strength(-300))
       .force("center", d3.forceCenter(svg.node().clientWidth/2, svg.node().clientHeight/2));
   
     // 绘制边
     const link = svg.append("g")
       .selectAll("line")
       .data(links)
       .join("line")
       .attr("stroke", "#aaa")
       .attr("stroke-width", 1.5);
   
     // 绘制节点
     const node = svg.append("g")
       .selectAll("circle")
       .data(nodes)
       .join("circle")
       .attr("r", 6)
       .attr("fill", "#2196F3")
       .call(d3.drag()
         .on("start", (event, d) => {
           if (!event.active) simulation.alphaTarget(0.3).restart();
           d.fx = d.x; d.fy = d.y;
         })
         .on("drag", (event, d) => { d.fx = event.x; d.fy = event.y; })
         .on("end", (event, d) => {
           if (!event.active) simulation.alphaTarget(0);
           d.fx = null; d.fy = null;
         }));
   
     // 添加节点标签
     const labels = svg.append("g")
       .selectAll("text")
       .data(nodes)
       .join("text")
       .text(d => d.label)
       .attr("font-size", "12px")
       .attr("x", 8)
       .attr("y", "0.3em");
   
     // 更新节点和边的位置
     simulation.on("tick", () => {
       link.attr("x1", d => d.source.x)
           .attr("y1", d => d.source.y)
           .attr("x2", d => d.target.x)
           .attr("y2", d => d.target.y);
   
       node.attr("cx", d => d.x).attr("cy", d => d.y);
       labels.attr("x", d => d.x).attr("y", d => d.y);
     });
   </script>
   

3. 保存仪表盘后，即可在Web UI中查看交互式的网络图。

方法3：Kusto Explorer联动本地脚本 #

• 在Kusto Explorer中执行查询获取Vertices和Edges数据，右键结果选择「复制为JSON」。
• 编写一个本地Python脚本，自动读取剪贴板中的JSON数据并绘图：

  import json
  import pyperclip
  import networkx as nx
  import matplotlib.pyplot as plt
  
  # 从剪贴板读取JSON数据
  raw_json = pyperclip.paste()
  data = json.loads(raw_json)
  
  # 分离顶点和边
  vertices = [item for item in data if item["type"] == "node"]
  edges = [item for item in data if item["type"] == "link"]
  
  # 构建图并绘制
  G = nx.Graph()
  G.add_nodes_from([v["id"] for v in vertices])
  G.add_edges_from([(e["source"], e["target"]) for e in edges])
  
  nx.draw(G, with_labels=True)
  plt.show()
  

• 运行脚本后即可快速生成网络图，无需手动保存文件。

内容的提问来源于stack exchange，提问作者amirush