根据键定义自定义图标？答案

【问题标题】：Define custom icon based on key?根据键定义自定义图标？
【发布时间】：2019-08-29 01:40:12
【问题描述】：

我的模型数据包含每个条目的多个键，感兴趣的是color。

我想根据color 中的值指定一个自定义图标，但无法获取该值。

这是我的模型的外观：

  { key: "legendVendor", geo: "Vendor", color: vendorColor },
  { key: "legendFactory", geo: "Factory", color: factoryColor },
  { key: "legendVendorFactory", geo: "Vendor Factory", color: vendorFactoryColor },
  { key: "legendSupplier", geo: "Supplier", color: supplierColor },

这是我的颜色常量的定义方式：

  var vendorColor = "#C8DA2B"; 
  var factoryColor = "#800080"; 
  var supplierColor = "#CCD1D1";
  var supplyChainColor = "#FFD700";
  var vendorFactoryColor = "#34c0eb";

这就是我根据颜色设置形状的方式：

  function geoFunc(geoname, color) {
    var geo = icons[geoname];
    // var color = icons[color];
    if (geo === undefined) geo = icons["cloud"];  // use this for an unknown icon name
    if (typeof geo === "string") {
      geo = icons[geoname] = go.Geometry.parse(geo, true);  // fill each geometry
    }

    switch(color) {
      case vendorColor:
        // code block
        geo = icons["heart"]
        geo = icons[geoname] = go.Geometry.parse(geo, true); 
        break;
      default:
        // code block
    }        

    return geo;
  }

这就是我调用该函数的方式：

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      {isTreeExpanded:false},
      {doubleClick: function(e, node) {node.expandTree(1);}},
      $(go.TextBlock, {text:"Text",width:100,height:100,textAlign:"center",font:"12pt sans-serif",margin:3,wrap: go.TextBlock.WrapDesiredSize,alignment:go.Spot.BottomCenter},new go.Binding("text", "geo")),
      $(go.Shape,
        { margin: 3, fill: colors["white"], strokeWidth: 0 },
        new go.Binding("geometry", "geo", "color", geoFunc), // magic happens here <--------
        new go.Binding("fill", "color")),

如何将color 的值传递给函数geoFunc？

【问题讨论】：

标签： javascript gojs

【解决方案1】：

您应该会收到运行时错误，因为“颜色”不是转换函数。使用go-debug.js 获取更多错误或警告消息可能会有所帮助。

如果你删除 Binding 构造函数的“geo”参数，你将有一个有效的构造函数调用，然后geoFunc函数将被调用并传递data.color的值。

【讨论】：