클릭과 선택

onPointClick — 지역 클릭 이벤트

{
    style: {
        cursor: 'pointer',
    },
    onPointClick: (args) => {
        console.log(args.source.id, args.value);
    },
}

데이터포인트가 연결된 지역을 클릭하면 호출된다. args.source가 그 지역에 연결된 데이터 객체다.
데이터가 연결되지 않은 지역에서는 호출되지 않는다. 모든 지역에서 받으려면 useMapData를 참고한다.
콜백이 명시적으로 true를 리턴하면 클릭의 기본 동작 (general.clickAction으로 지정한 동작)이 진행되지 않는다.
클릭한 지역의 상세 데이터를 그리드나 다른 차트에 표시하는 연동 시나리오의 출발점이 된다.

선택 — selection 옵션

시리즈의 selection 옵션으로 선택 기능을 켜고, 선택된 지역과 선택되지 않은 지역의 스타일을 지정한다.

const config = {
    series: [
        {
            selection: {
                visible: true,                       // 선택 사용
                style: {                             // 선택된 지역
                    stroke: '#5d5d5d',
                    strokeWidth: 2,
                },
                unselectedStyle: { opacity: 0.4 },   // 선택이 있을 때 선택되지 않은 지역
                focus: {                             // 마지막에 선택한 지역(focus)
                    style: { stroke: '#d32f2f', strokeWidth: 4 },
                },
            },
        },
    ],
};

selection.visible이 true인 시리즈만 선택할 수 있다. 마우스 클릭과 아래 API 모두 같다. selection: true로 쓰면 visible만 켠다.
selection.style은 선택된 지역에 얹는다. 선택된 지역 위에 마우스를 올리면 hoverStyle이 먼저 적용되고 그 위에 selection.style이 덮이므로, 두 스타일이 겹치는 속성은 선택 스타일이 보인다.
selection.unselectedStyle은 차트에 선택된 지역이 하나라도 있을 때, 선택 가능한 시리즈에서 데이터가 연결됐지만 선택되지 않은 지역에 얹는다. 선택을 모두 해제하면 원래 스타일로 돌아온다. 지정하지 않으면 선택되지 않은 지역의 스타일은 바뀌지 않는다.
스타일을 클래스 이름(문자열)으로 지정하면 inline으로 적용되는 hoverStyle에 밀릴 수 있다. 이때는 CSS에 !important를 쓴다.
selection.visible을 런타임에 끄면 그 시리즈의 선택은 모두 해제된다. 다시 켜도 되살아나지 않는다.

focus — 마지막에 선택한 지역

선택 목록은 선택한 순서를 유지하고, 마지막에 선택한 지역이 focus다. focus는 항상 선택된 지역 중 하나이고 둘 이상이 될 수 없다.

selection.focus.style은 focus 지역에 selection.style 위에 얹는다. 두 스타일이 겹치는 속성은 focus 스타일이 보인다. 지정하지 않으면 focus 지역도 다른 선택 지역과 같은 모양이다. 기본 표시는 없다.
selection.focus.visible을 false로 지정하면 focus 표시만 끈다. focus: false로 지정해도 같다. chart.selection.focusedPoint와 onFocusChanged는 그대로 동작한다.
이미 선택된 지역을 API로 다시 선택하면(addPoints, select(point, false)) 선택 목록의 맨 뒤로 옮겨져 focus가 된다.
focus 지역의 선택을 풀면 남은 선택 중 가장 최근에 선택한 지역으로 focus가 옮겨 간다. 선택을 모두 풀면 focus도 풀린다.

마우스 클릭만으로 선택되게 하려면 차트의 general.clickAction을 'select'로(기본값 'none') 지정한다.

클릭: 기존 선택을 지우고 그 지역만 선택한다. 단독으로 선택된 지역을 다시 클릭하면 해제된다.
Shift·Ctrl·Cmd 클릭: 기존 선택을 유지하면서 그 지역을 토글한다. 선택되지 않은 지역은 더해져 focus가 되고, 이미 선택된 지역은 빠진다. 빠진 지역이 focus였으면 남은 선택 중 마지막 지역이 focus가 된다.
지역이 아닌 곳 클릭: 전체 선택과 focus를 해제한다.

선택 API — select()/unselect()와 addPoints()/unselectPoints()

API로 선택할 때도 그 시리즈의 selection.visible이 true여야 한다. 차트의 clickAction 설정과는 무관하다.

데이터포인트는 차트가 첫 렌더링을 마칠 때 만들어진다. 그래서 선택 API는 createChart·createChartAsync·load의 callback(LoadCallbackArgs를 받는 로드 콜백) 안에서 부른다. 그 전에 부르면 고를 포인트가 없어 선택되지 않는다.

const chart = await RealMap.createChartAsync(document, 'realmap', config, true, (args) => {
    args.chart.selection.addPoints(['11', '25']);
});

포인트 하나씩 — 시리즈의 select()/unselect()

const map = chart.seriesByType('map');
const point = map.pointById('11');
 
map.select(point);      // 기존 선택을 지우고 이 포인트만 선택
map.select(point, false); // 기존 선택에 더함
map.unselect(point);    // 이 포인트만 해제

pointById로 데이터의 id에 해당하는 데이터포인트를 찾아서 넘긴다. 데이터에 id가 없어 mapKeys로 연결했다면 pointByProp('지도 속성명', 값)으로 찾는다. pointByProp은 데이터가 아니라 지도 소스 "properties"의 속성으로 찾는다는 점에 주의한다.
그리드의 행을 클릭해서 지도의 지역을 선택하는 식의 연동은 onPointClick과 이 API를 조합해 구현한다.

여러 포인트를 한 번에 — chart.selection의 addPoints()/unselectPoints()

지역 id로 여러 포인트를 한 번에 선택하거나 해제한다. 시리즈가 여러 개여도 호출 한 번에 onSelectionChanged는 한 번만 나간다.

chart.selection.addPoints('11');                                  // 모든 시리즈의 서울
chart.selection.addPoints(['11', '25']);                          // 여러 id
chart.selection.addPoints({ sido: ['11', '25'], sigun: '11230' }); // 시리즈 name별로
chart.selection.unselectPoints({ sido: '11' });                   // 일부 해제
chart.selection.clear();                                          // 전체 해제

id 하나나 배열을 넘기면 화면에 보이는 선택 가능 시리즈 모두에서 같은 id의 포인트를 고른다. id는 문자열과 숫자 모두 되고, 데이터의 id가 숫자여도 찾는다.
시리즈 name을 키로 하는 객체를 넘기면 시리즈마다 다른 id를 지정할 수 있다.
addPoints는 기존 선택을 지우지 않고 더한다. 없는 시리즈·없는 id·선택할 수 없는 시리즈는 건너뛴다. 한 시리즈에 같은 id의 포인트가 여럿이면 첫 포인트만 고른다.
반환값은 선택 상태가 바뀌었는지다. 이미 선택된 포인트를 다시 넣어 순서만 바뀐 경우도 true다.

focus 읽기와 콜백 — focusedPoint와 onFocusChanged

const config = {
    general: {
        onSelectionChanged: (args) => { /* 선택 목록이 바뀔 때마다 한 번 */ },
        onFocusChanged: (args) => {
            // args.series: focus 지역의 시리즈, args.point: 새 focus, args.previousPoint: 이전 focus
            // 선택이 모두 풀리면 series와 point가 null이다.
        },
    },
};
 
chart.selection.focusedPoint;   // 마지막에 선택한 포인트. 선택이 없으면 null

onFocusChanged는 focus가 실제로 바뀔 때만, onSelectionChanged 뒤에 한 번 호출된다.
이미 선택된 지역을 다시 선택해 순서만 바뀌면 onSelectionChanged는 호출되지 않고 onFocusChanged만 호출된다.
focus가 아닌 지역을 풀면 onSelectionChanged만 호출된다.
args.point·args.previousPoint는 호출마다 새로 만든 객체라 둘을 비교하거나 보관해도 된다.