4.6 ルールベースのスタイル

ルールベースのスタイルは、任意の頂点またはエッジのプロパティ値に適用できます。ルールベースのスタイル設定は、1つ以上の定義済プロパティを使用して定義できます。設定された条件が検証され、指定した条件に基づいて頂点またはエッジがフィルタ処理されます。

次の演算子を使用して、設定されたルールとプロパティ値が一致するかどうかを判断できます: =、>、<、>=、<=、!=および~。

次の例に注目してください。ここでは、プロパティにラベル値blueが設定されている場合に、頂点blueを色付けする規則を記述しています。

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

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

const settings = {};
settings.baseStyles = {
  vertex: {
    label: { text: '${properties.name}' }
  }
};

settings.ruleBasedStyles = [
  {
    // The target in the rule.
    target: 'vertex',
    component: 'vertex',
    // The conditions on which the filter will be applied.
    conditions: {
      operator: 'and',
      conditions: [
        // This condition will verify if the label on a vertex is equals to 'blue'.
        {
          property: "label",
          operator: "=",
          value: "blue"
        }
      ]
    },
    // The title for the filter that will show in the legend.
    legendTitle: 'Rule by label',
    // The colors to apply to the nodes that match the rule.
    style: {
      color: 'blue'
    },
    stylingEnabled: true
  }
];

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

ルールベースのスタイルを適用して、ノードのサイズを調整することもできます。また、複数の条件を同時に照合するルールも定義できます。これらの条件は、andやor演算子を使用して構成できます。このような場合、and演算子については、指定されたすべての条件が満たされた場合、or演算子については、いずれかの条件が満たされた場合にのみフィルタ処理が適用されます。

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello',
      age: 10
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World',
      age: 20
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name',
      age: 30
    }
  }
];

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

const settings = {};
settings.baseStyles = {
  vertex: {
    label: {text: '${properties.name}'}
  }
};

settings.ruleBasedStyles = [
  {
    // The target in the rule.
    target: 'vertex',
    component: 'vertex',
    // The conditions on which the rule will be applied.
    conditions: {
      operator: 'and',
      conditions: [
        // This condition will verify that the name contains the letter o.
        {
          property: "label",
          operator: "~",
          value: "o"
        },
        // This condition will verify that the name contains the letter l.
        {
          property: "label",
          operator: "~",
          value: "l"
        }
      ]
    },
    // The title for the filter that will show in the legend.
    legendTitle: 'Rule by name',
    // The colors to apply to the nodes that match the rule.
    style: {
      size: 15
    },
    stylingEnabled: true
  }
];

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