[Tree] react-d3-tree 미니맵 만들기.

마땅한 라이브러리가 없어 해당 라이브러리를 적용하기로 했다.

https://github.com/jeremy-carbonne/react-minimap

GitHub - jeremy-carbonne/react-minimap: A minimap component for React

npm i react-minimap --force
or
npm i react-minimap --legacy-peer-deps

위 명령어를 사용하는 이유는 오래되서리...

뒷 옵션은 참조할 것.

https://velog.io/@yonyas/Fix-the-upstream-dependency-conflict-installing-NPM-packages-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EA%B8%B0

npm install `--force` and `--legacy-peer-deps` 차이점

 

내용은 아래와 같다.

selector로 해당 태그를 렌더링 해주는 것.

<Minimap selector=".card">
	<div className="card">
		<h1>Title</h1>
	</div>
	<div className="card">
		<h1>Title 2</h1>
		<div className="card">
			<h1>Titles are never rendered by the Minimap</h1>
		</div>
	</div>
</Minimap>

 

해당 태그에 사용되는 속성 값

Prop nameTypeDefault valueDescription

selector	string	is required	A css selector for specify what you want to render inside the minimap
className	string	''	A className for the minimap component
width	number	200
height	number	200
keepAspectRatio	boolean	false	압축할 것인지 물어보는 것 같은데, 해당 내용을 압축하면 크기가 뒤틀려서 false로 사용.
childComponent	any	Internal Component	Allows customizing how components matched by selector are rendered (optional)
onMountCenterOnX	boolean	false
onMountCenterOnY	boolean	false

사용하는 방법은

<Minimap selector="렌더링할 클래스네임">
	{children}
</Minimap>

class형을 function형으로 바꾸는 것이 좀 까다롭긴했는데,

아래 내용 보고 많이 해결했다.

 

간혹 지도가 이상하게 나올 경우 미니맵 위에 div로 랩핑할 것.

나의 경우 div에 width, height를 따로 먹여 해결했다

 

내용 참조.

https://codesandbox.io/s/small-tdd-dhogs

small-tdd-dhogs - CodeSandbox

 

해당 내용으로 참조하여 만들었는데, path값등이 안그려져서 좀 짜증...

검색, 미니맵 모두 완성한 그림