4.4 Children

children属性を使用して、指定されたノードの周囲に表示される子ノードを作成できます。子ノードのスタイルは、同様に親ノードに適用されます。

次の例を検討してください:

// 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'
    }
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    }
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    }
  }
];

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

const settings = {
  showLegend: false,
  baseStyles: {
    vertex: {
      label: { text: '${properties.name}' },
      // This would add two children to every vertex, any name can be assigned to these children nodes.
      children: {
        firstChild: {
          size: '4',
          color: 'red',
          children: {
            size: '2'
          }
        },
        secondChild: {
          size: '2',
          color: 'green',
          border: {
            'width': 1,
            'color': 'black'
          }
        }
      }
    }
  }
};

settings.ruleBasedStyles = [{
  component: 'vertex',
  target: 'vertex',
  stylingEnabled: true,
  conditions: {
    operator: 'and',
    conditions: [{
      property: "label",
      operator: "=",
      value: "blue"
    }]
  },
  style: { color: 'blue' }
}];

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

対応するビジュアライゼーションが次のように表示されます:

図4-6 子ノードのビジュアル化

「図4-6 子ノードのビジュアル化」の説明