如何使用gojs实现类似仙人掌网络的天气图？答案

【问题标题】：How to use gojs implements similar cacti network weathermap？如何使用gojs实现类似仙人掌网络的天气图？
【发布时间】：2018-02-20 02:59:55
【问题描述】：

如何使用gojs实现类似的网络天气图仙人掌天气图 enter image description here

【问题讨论】：

标签： openweathermap gojs

【解决方案1】：

可能是这样的：https://gojs.net/temp/twoStrokeLinkCurved.html

链接模板是相当正常的，除了主路径（第一个Shape）根本没有绘制，有一个不可见的链接标签，其大小导致重复的链接被路由到比正常更远的距离，并且有一个自定义链接标签，在中间绘制两个相对的箭头。

myDiagram.linkTemplate =
  $(CurvedTwoPartLink,
    { curve: go.Link.Bezier, relinkableFrom: true, relinkableTo: true },
    $(go.Shape, { stroke: null, fill: null }),
    $(go.Shape, { stroke: null, fill: null, width: 35, height: 15 }),
    $(go.Shape,
      { // the double-arrow in the middle of the link
        geometryString: "F1 M0 0 L6 3.5 12 0 M0 7 L6 3.5 12 7",
        fill: "white", segmentOrientation: go.Link.OrientAlong
      }),
    $(go.Panel, "Auto",
      { segmentIndex: 0, segmentFraction: 0.75 },
      $(go.Shape, { fill: "white" }),
      $(go.TextBlock, { margin: 2 },
        new go.Binding("text", "text1"))
    ),
    $(go.Panel, "Auto",
      { segmentIndex: -1, segmentFraction: 0.75 },
      $(go.Shape, { fill: "white" }),
      $(go.TextBlock, { margin: 2 },
        new go.Binding("text", "text2"))
    )
  );

实现的关键是每个明显的链接实际上有两个额外的链接。这两个链接以您想要的方式设置样式，而主路径 Shape 只能使用单一颜色进行描边。这两个链接连接到主链接上的附加标签节点。查看示例中的实现以了解其工作原理。

【讨论】：