时间戳

首页 > 解决方案 > 根据键定义自定义图标？

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

问题描述

我有模型数据，其中包含每个条目的几个键，感兴趣的是color.

我想根据 in 的值指定一个自定义图标，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？

标签： javascriptgojs

解决方案

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

如果您删除 Binding 构造函数的“geo”参数，您将对构造函数进行有效调用，然后该geoFunc函数将被调用并传递data.color.

推荐阅读