2013-02-27 1 views
1

나는 여러 일 동안 간단한 선형 차트를 사용하여 시간 기반 데이터를 차트로 표시하려고합니다. 선 그래프의 배경에 시간의 색 그라디언트를 표시하고 싶습니다. 매일의 정오는 흰색, 한밤중은 거의 검은 색, 그 사이의 모든 시간은 부드러운 회색조입니다.X 축의 눈금에 연결된 D3.js 그래프에 배경 그라디언트를 사용할 수 있습니까?

내 라인 전에 사각형을 그려서 매우 clunkily, 아주이 작업을 수행 할 수 있지만 다음과 같은 문제점이있다 : 1 시간 데이터 포인트없이 rectange를 얻을하지 않습니다 내 배경 2에서 틈을 떠나. 전환이 원활하지는 않지만 단계적입니다.

간격을 채우는 가장 좋은 방법은 데이터 포인트에 관계없이 규칙적으로 간격을 두어 x 축을 따라 틱에 래치하는 것입니다. 눈금 표시와 함께 그라디언트, CSS 또는 SVG를 부드럽게 적용 할 수있는 방법이 있습니까 (즉, 한 그라디언트가 끝나고 다른 그라데이션이 시작되거나 겹치는 부분 사이에 아무런 간격도 없음).)? 데이터를 추가하거나 제거하면 그래디언트가 적절하게 변경되어야합니다.

모든 도움을 주시면 감사하겠습니다.

+0

질문에 예제 그래프/이미지를 추가하면 도움이 될만한 정보를 찾을 수 있을지 모르겠습니다. – Bill

답변

0

그라디언트를 <def> 섹션에 정의하고 차트 작성 일과 정렬 된 직사각형을 배치하십시오. 채우기 속성을 url("#the_gradient")으로 설정하십시오. 여기 좀보세요 http://www.w3.org/TR/SVG/pservers.html

관련 문제