4.2 デフォルトの凡例スタイル

頂点またはエッジにラベルが含まれている場合は、それらのラベルに基づいて、対応する凡例エントリが自動的に生成されます。たとえば、次のようにスタイルを設定できます:

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello'
    },
    labels:['color']
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    },
    labels:['color']
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    },
    labels:['text']
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2,
    labels: ['edge']
  },
  {
    id: 2,
    source: 2,
    target: 3,
    labels: ['edge']
  }
];

const settings = {baseStyles: {}};

const graphViz = new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

その場合、次に示すように、(前のコードで使用した)頂点およびエッジのラベルから凡例が生成されます:

図4-2 デフォルトの凡例

「図4-2 デフォルトの凡例」の説明

getCurrentRuleBasedStyles関数は、デフォルト・スタイルとカスタム・スタイルの両方を含む、現在定義されているルールベースのスタイルを返します。次の例に示すように、この関数を使用して、デフォルトのルールベースのスタイルを変更できます:

const graphViz = new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

const receivedRules = grpahViz.getCurrentRuleBasedStyles();

/*
Here is example of receivedRules. If the rule is default, rule.isDefault is true.
[
  {
    "_id": "2",
    "stylingEnabled": true,
    "target": "vertex",
    "conditions": {
      "operator": "and",
      "conditions": [
        {
          "property": "labels",
          "operator": "~",
          "value": "color"
        }
      ]
    },
    "component": "vertex",
    "style": {
      "color": "#F0CC71"
    },
    "legendTitle": "color",
    "isDefaultRule": true
  },
  ...
]
*/

//Modify receivedRules. Note: Do not edit _id, isDefaultRule, and conditions.
//Modify _id = 2 default rule, color to aqua
receivedRules = [
  {
    "_id": "2",
    "stylingEnabled": true,
    "target": "vertex",
    "conditions": {
      "operator": "and",
      "conditions": [
        {
          "property": "labels",
          "operator": "~",
          "value": "color"
        }
      ]
    },
    "component": "vertex",
    "style": {
      "color": "aqua"
    },
    "legendTitle": "color",
    "isDefaultRule": true
  },
  ...
]

//Assgin the modified received rules to settings.ruleBasedStyles
settings.ruleBasedStyles = recivedRules;
graphViz.$set({setting});

更新されたスタイルは、次のように凡例パネルに反映されます:

図4-3 カスタム凡例

「図4-3 カスタム凡例」の説明