d3.js 레이더 그래프 - 라인 사이에 채우기

Question

저는 삼각형 중 두 개 사이에 채우기를 작성하려고합니다. 예를 들어 빨간색과 녹색 삼각형 사이에 빨간색 채우기가 있습니다. 아무도 이것을 성취 할 방법을 알고 있습니까? 나는 그들이 CSS,하지 D3를 사용하여 채우기를 만들 생각하지만, 나는

는 방사형 차트를 사용하여 mbostock의 답을 위의 문제를 해결 ..., 내가 비슷한 무언가를 생각 레이더 그래프의 또 다른 예를 보았다 ...

최종 결과

Answer 1

이 경우 사용자 지정 경로를 구현할 필요가 없습니다. d3.svg.area.radial 경로 생성기를 사용할 수 있습니다. 다음은주기적인 데이터를 플롯하는 데 사용할 수있는 누적 방사형 영역 차트의 예

• http://bl.ocks.org/3048740

구현은 규모가 될 것 레이더 차트를 제외하고, 레이더 차트에 상당히 유사하다 각 각도마다 다릅니다.

Answer 2

이를 위해, 사용자 정의 경로 생성기를 사용하여 하나 개의 경로에 두 개의 삼각형을 병합해야합니다. 그런 다음 경로를 닫고 채울 수 있습니다. 삼각형의 색상을 다르게하려면 각 색상을 따로 그려야합니다.

큰 속임수를 채우고 간단히 채우고 그 위에 흰색으로 채워진 작은 삼각형을 넣으려고 할 수 있습니다. 그런 다음 그리드 선을 그립니다. 그러나 삼각형이 겹치지 않는 경우에만 작동합니다.

Answer 3

Lars가 언급했듯이 SVG Path element을 만들고 싶습니다.

경로는 요소의 d 속성의 일련의 명령으로 정의됩니다. 두 삼각형 중 하나의 꼭지점으로 절대적으로 이동 ("M")하기를 원합니다. 그런 다음 lineto (절대적으로 "L"또는 상대적으로 "l")를 사용하여 첫 번째 삼각형의 각 구석으로 이동합니다. 그런 다음 절대적으로 다른 삼각형으로 이동하고 반복하십시오. 끝에있는 "z"가 경로를 닫습니다. 경로의 채우기를 원하는 색상으로 설정하십시오.

는 여기 단일 삼각형 위의 링크에서 경로의 예 : 당신은 행동이 기술을보고 싶은 경우

<path d="M 100 100 L 300 100 L 200 300 z"/> 

mbostock는 http://square.github.com/crossfilter/에서 막대 차트에 대한 경로에 사용합니다.