G6 3.8 출시

AntV G6의 매달 발표는 예정대로 진행된다.오늘 우리는 3.8.0판을 발표했다.무슨 새로운 일이 있습니까?'G6 인터랙티브 문서 그리기'와'놀 수 있는 시간표'가 가장 큰 하이라이트다.'테두리 필터 렌즈','어안 설정 가능','더 강력한 JSX 루틴 정의 방안','성능 최적화','전체 기능'도 있다.

대화형 문서 그래픽 생성기

단지 그것을 어떻게 사용하는지 알고 싶지만, 문서를 읽고 싶지 않습니까?이렇게 많은 설정 항목이 있는데, 당신이 원하는 설정 항목을 찾을 수 없습니까?사용자의 아픔은 우리의 아픔이고, 사용자의 문제는 우리의 문제이다.이번에 GraphMaker를 시작했습니다. 이것은 상호작용 문서입니다. 문서를 보지 않고 설정하는 방법을 알 수 있습니다.

If there is a slight movement, click GraphMarker to experience it.

테두리 필터: 탐색 집중

Please click here to experience.

그림에 대량의 변이 있을 때, 변 사이의 상호 가리기와 교차로 인해 우리는 주의변을 똑똑히 보기 어렵다.이 문제를 해결하기 위해 G6는 테두리 필터 렌즈 플러그인을 제공했다.테두리 필터 플러그인의 사용은 예전과 같이 간단하다. 실례화할 때 필터 기능이나 내장 필터 옵션을 설정하기만 하면 된다.

const filterLens = new G6.EdgeFilterLens({
  // The way to move the lens
  trigger: 'drag',
  // Whether to show the label inside the lens
  showLabel: 'edge',
  // The filter option. 'one': only show the edges with one end node inside the lens;
  // 'both': show the edges with two end nodes inside the lens;
  // 'only-source': only show the edges with source node inside the lens;
  // 'only-target': only show the edges with target node inside the lens.
  type?: 'both';
  // Custom the filter function: e.g. only show the edges with 'size' larger than 3
  shouldShow: d => {
    if (d.size > 3) return true;
    return false;
  },
});

재생할 수 있는 각종 타이머

Please click here to experience.

타임라인 구성 요소는 미리 보기 버전으로 구성 항목과 API가 변경될 수 있습니다.만약 생산 환경에서 그것을 사용한다면, 자세히 고려해 주십시오. 우리는 다음 버전에서 안정적인 버전을 제공할 것입니다.
우리는 세 가지 형식의 타이머 플러그인을 제공했다.
• 트렌드맵 일정
• 간단한 타임라인
• 타이머 게이지
그것들은 모두 범위/단일 시점 재생, 빠른 진입, 빠른 퇴장, 속도 조정 등의 기능을 지원한다.여기서 트렌드맵 타임라인과 단순 버전 타임라인은 단일 시간 및 시간 범위 전환을 지원합니다.

트렌드맵 일정

단선도나 면적도는 수요를 만족시키기 어렵습니까?너는 혼합 도표를 사용하는 것을 고려할 수 있다.우리는 현재 직사각형, 접선도, 면적도를 지원하고 있다.우리는 다절선도를 지원하지 않는다.

단순 타이머

트렌드맵 타임라인이 너무 복잡하다고 생각되면 타임라인 어셈블리의 간단한 버전을 선택할 수 있습니다.

타이머 게이지

눈금형 타임라인은 이산 시간 데이터를 표시하는 데 사용됩니다.눈금 타임라인의 각 작은 정사각형은 눈금 값을 나타냅니다.클릭하여 특정 비율 선택하기;타임라인에서 드래그하여 배율 범위를 선택합니다.

어안 구성이 더 자유롭다

Please click here to experience.

G6의 마지막 버전에서 FishEye를 출시했습니다. 이것은 초점+상하문을 탐색하는 플러그인입니다. 관심 구역을 확대할 때 상하문과 상하문과 초점 구역 간의 관계를 잃지 않도록 합니다.
이번에는 FishEye를 더 좋아지게 하자!FishEye에 더 많은 설정을 추가하여 사용자가 FishEye를 사용할 때 FishEye의 덮어쓰기 범위와 확대율을 동적으로 변경할 수 있도록 합니다.사용자는 그들이 원하는 모든 것을 탐색할 수 있다.

더 강력한 노드 정의 방안

Please click here to experience, and the document is stamped here.

G6의 마지막 버전에서 사용자 정의 노드를 사용하기 시작하는 비용을 낮추기 위해 우리는 JSX와 유사한 문법을 제공하여 노드를 정의했다.편리함과 동시에 많은 제한이 증가하여 유연성이 크게 떨어졌다.
우리는 사용자의 의견을 수집하고 업그레이드를 진행했다.부팅 비용을 낮추는 동시에 어느 정도의 유연성과 확장성을 유지했다.현재 JSX와 같은 사전 제작 사용자 정의 노드는 다음과 같은 구성을 지원합니다.
• afterDraw, setState 및 기타 방법을 지원하는 정의를 업데이트합니다.
• next 속성을 style에 추가합니다.값이 'inline' 이면 다음 요소는 이전 요소의 오른쪽에 자동으로 배치됩니다.

G6.registerNode('jsx-node', {
    jsx: cfg => `<group>
        <rect style={{
      marginLeft: 10,
      marginTop: 3,
      width: ${cfg.width},
      height: ${cfg.height},
      fill: '#fff',
      stroke: '#1890ff'
    }} name="body" >
      <rect style={{
        marginLeft: 10,
        width: ${cfg.width / 100 * cfg.used},
        height: ${cfg.height},
        fill: '#1890ff',
        stroke: '#1890ff'
      }}/>
    </rect>
  </group>`,
  setState(name: string, value: string | boolean, item: Item) {},
  afterDraw(cfg: NodeConfig) {}
})

성능 및 기능 최적화

대량의 데이터와 상호작용하는 성능 문제가 G6 사용자들을 괴롭히고 있다.이전 릴리즈에서는 캔버스 드래그 중에 중요하지 않은 그래픽을 숨길 수 있도록 지원한 데 이어, 이 릴리즈에서는 배율 조정 중에 자동으로 중요하지 않은 그래픽을 숨길 수 있도록 추가했습니다.이 작은 최적화는 캔버스의 축소 성능과 사용자의 상호작용 체험을 크게 향상시킬 수 있다.
이 밖에 그림에 대량의 조합이 있을 때도 일부 성능 문제가 발생할 수 있다.이제 Combo의 성능도 최적화되었습니다.
새로운 특성을 추가하고 성능을 최적화하는 토대에서 기존의 특성을 끊임없이 보완하고 결함을 복구한다.3.7.0에서 3.8.0까지 우리는 접선 알고리즘을 최적화하여 총 20여 개의 가용성 문제와 기능 결함을 복구했다.자세한 내용은 G6 변경 로그를 참조하십시오.

결론

G6 3.8.0에서 우리는 세 가지 측면에서 사용성, 분석 능력과 성능을 강화하고 최적화했다.
사용자가 더 빠르고 더 잘 배우고 입문할 수 있도록 G6 대화형 문서인 GraphMaker를 발표했습니다.복잡한 관계 데이터를 탐색하기 쉽도록side filter 플러그인을 추가하고 기존의 FishEye 플러그인을 강화했습니다.시간 시퀀스 데이터의 기반을 탐색하기 위해 우리는 세 가지 서로 다른 유형의 시간선을 제공했다.유연성과 확장성을 유지하면서 저비용으로 노드를 정의하기 위해 JSX를 사용하여 노드를 정의하는 솔루션을 최적화했습니다...
G6는 그래픽 시각화와 그래픽 분석 분야에서 끊임없이 전진하고 있다.우리는 당신의 지지와 피드백을 매우 필요로 합니다. 당신의 관심에 감사 드립니다.

AntV G6 is an open source graph visualization engine, focusing on graph visualization and graph analysis.
Welcome to follow and star our GitHub: https://github.com/antvis/G6
Official website: https://g6.antv.vision/en/