javascript - 根据按键定义自定义图标？

Question

我有模型数据，其中每个条目包含多个键，感兴趣的是颜色。

我想根据 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？

Answer 1

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

如果删除 Binding 构造函数的“geo”参数，您将获得对构造函数的有效调用，然后将调用 geoFunc 函数并传递 data 的值.颜色.