간단한 막대 그래프를 니보로 고통스럽게 그리기

이 문장은 최초로 나타났다Chris DeLuca's blog
나는 Astoria Digital 자원 봉사팀과 Muckrock 합작을 위해 제도 프로젝트를 진행해 왔다.이 프로그램은 뉴욕 50a 경찰 규율 기록 요청에 대한 데이터를 시각화할 것이다.
나의 첫 번째 임무는 개념 검증이다. 아주 기본적인 데이터를 그래프에 넣는 것이다.데이터는 단지 하나의 축일 뿐이다. 요청마다 비용이 든다.이 시각화의 목적을 위해 우리는 독특한 원가에만 관심을 가지기 때문에 목록은 최종적으로 19개의 값만 있다.

[
"$47,504.00"
"$30,815.00"
"$20,510.00"
"$5,000.00"
"$846.16"
"$250.00"
"$244.66"
"$200.00"
"$56.15"
"$36.00"
"$28.00"
"$27.25"
"$19.39"
"$17.50"
"$14.75"
"$13.25"
"$8.75"
"$7.50"
"$3.00"
]

우리의 목표는 모든 가치 간의 관계를 좋은 구식 스트라이프로 보여주는 것이다.프로젝트가 이미 사용되고 있기 때문에React 저는 nivo를 도형 라이브러리로 사용하기로 결정했습니다. 이것은 엔진 뚜껑 아래에서 사용하기로 결정했습니다d3.
그때부터 일이 재미있어지기 시작했다. 재미있다는 것은 의외이고, 의외라는 것은 짜증나는 것을 가리킨다.
Nivo에는 많은 문서가 있는데, 매우 유창한 디스플레이, 인터랙티브 위젯, 복잡한 문제를 어떻게 해결하는지에 대한 많은 예가 있다.그러나 간단한 문제를 어떻게 해결하는지에 대한 대량의 문서가 현저히 부족하다. 예를 들어 매우 간단한 조형도를 실현하는 것이다.마찬가지로 건장한 입문 문서나 라이브러리의 체계 구조, 관건적인 개념, 가설 등에 대한 해석이 부족하다.
짜증나지만 좋아요.나는 인터넷 개발을 한 지 이미 충분해서 놀라서 도망가지 않을 것이다.나는 생각보다 오래 걸리지만 일할 수 있는 작은 부품이 하나 있다.

<Bar
  width={800}
  height={500}
  layout="horizontal"
  data={prices}
/>

일이 좀 과장되다.그것이 과장되었을 때, 그것은 보기에, 응, 그다지 마음에 들지 않았다.

제 데이터가 틀렸나요?나는 반복해서 검사해서 console.log를 여기저기 던졌다.모든 것이 다 좋은 것 같다.
자세히 살펴보니 문제는 데이터가 잘못된 것이 아니라 디스플레이가 차단된 것 같다.
nivo 문서를 봤어요. 중요한 설정을 놓쳤을지도 몰라요.포함된 CSS 파일이 필요합니까?올바른 렌더링 옵션은 어디에 있습니까?
불행하게도, 내가 발견한 것은 다층 데이터와 대량의 애니메이션을 어떻게 사용하여 다색조를 렌더링하는지에 관한 매우 기이한 방법일 뿐이다.멋진 물건인데 여기선 도움이 안 돼.
나는 낙담하기 시작했다.아주 간단한 스트라이프를 보여주기란 얼마나 어려운가?
차트의 width 및 height 속성을 확장하려고 했지만 이는 SVG 캔버스의 크기를 늘려 마감 값을 유지할 뿐입니다.
마지막으로 나는 붕괴되어nivo의 코드를 연구하기 시작했다.

작업

그것에 대한 문서를 찾을 수 없지만, CSS 파일을 포함해야 할지도 모르겠습니다.나는 니보가 생성한 SVG 소스 코드를 훑어보았는데, SVG 요소는 어떤 종류나 ID도 포함하지 않는다는 것을 발견했다.이것은 기본 CSS 파일이 포함되지 않는다는 것을 의미하지만, 나의 가설을 검증하기 위해 전체 노드 패키지에서 모든 CSS 파일을 검색했습니다.

find ./node_modules/@nivo/ -type f -name "*.css"

아무런 결과도 돌아오지 않았기 때문에 디버그 목록에서 '라이브러리 CSS 파일 포함 잊어버리기' 를 자신 있게 그릴 수 있습니다.
예기한 외부 CSS 라이브러리가 없는 경우 차트는 다른 방법으로 스타일을 설정해야 합니다.속성을 사용하여 SVG는 많은 조형 효과가 있다.어쩌면 안에 무엇이 잘못되었을지도 모른다.라이브러리에서 이렇게 간단한 도형을 나타내는 데 사용되는 오류가 발생했습니다. 이것은 연장된 것 같지만 더 좋은 생각이 없습니다. 그래서 SVG 표시를 정리하기 시작했습니다.
나는 SVG 속성에 이상한 점이 있다는 것을 알아차리지 못했지만, 많은 내연 CSS 스타일을 알아차렸다.그래, 일리가 있어.순수 SVG에 비해 이 라이브러리는 더 많은 스타일링 기능을 필요로 하고 외부 CSS 원본을 사용하지 않기 때문에 모든 요소에 스타일을 주입합니다.
이것은 내가 지금까지 해 온 핵심 가설에 도전을 주었다. 이 라이브러리는 스마트하고 SVG 화포에서 제시한 데이터를 수용할 수 있다.API 문서를 새 가상 고글로 다시 본 후 다음과 같은 속성을 찾았습니다margin.

Chart margin.

이것은 내가 해명하기를 바라는 것이 아니지만, 나의 새로운 이론은 이 라이브러리는 내연 양식만 처리하기 때문에 (다른 docs 검색에서 사용자 정의 CSS 클래스/id 값을 전달하는 방법을 찾지 못했기 때문에) 차단된 값은 본질적으로 상쇄 문제이기 때문에 margin 내가 원하는 양식이 바뀔 수 있는 방식과 매우 가깝다고 생각한다.
나는 빨판으로 부품을 두드렸는데, 과연 문제를 해결했다.불행히도 나의 가설은 옳았다.간단한 스트라이프 그래프 margin s 를 설정해야 합니다. 그렇지 않으면 니보가 정확하게 표시할 수 없습니다.
핵심 개념 문서에서 이 점을 개술하는 것은 정말 도움이 될 뿐만 아니라, 상당히 낙담할 만하다. 왜냐하면 이것은 구성 요소의 설정이 데이터의 형상과 직접적으로 관련되어 유지보수의 번거로움을 증가시켰기 때문이다.그러나 그것은 성공했다. 이 문제는 미래의 크리스가 처리해야 할 것이다.
불행히도 나는 아직 완전히 완성하지 못했다.나의 도표는 매우 간단하고 하나의 값열만 포함하기 때문에, 나는 디스플레이를 간소화하고 싶다.기본적으로,nivo 도표는 x축과 y축 라벨을 출력하고, 줄무늬 그림 자체의 라벨을 덮어씁니다.이것은 복잡한 다축 데이터에 매우 유용하지만, 이러한 간단한 도표에 대해서는 완전히 쓸데없는 것이며, 그것들 사이의 커다란 차이로 인해 값이 중첩될 수도 있다.

나의 이상적인 상태는 x축과 y축 디스플레이를 숨기고, 줄무늬 그림에 덮어쓰는 라벨만 사용하는 것이다. 왜냐하면 데이터는 관련이 없기 때문이다.그러나,nivo는 이 방면의 옵션을 제공하지 않았다.덮어쓰기 탭을 숨기는 옵션이 있어서 선택했습니다.
이것은 데이터가 중첩되는 문제를 해결했지만, y축은 여전히 불필요해서 곤혹스러울 수 있다.

다시 한 번,nivo는 이 디스플레이를 숨길 수 없어서 나는 어둠의 예술: 해커 CSS로 향했다.
nivo는 원소에 유일한 표지부호를 제공하지 않고 자신이 전달하는 방법을 제공하지 않기 때문에 나는 이 괴물에게 도움을 청했다.

.headline__costs + svg > g > g:nth-child(2) {
  display: none;
}

눈빛이 예리한 CSS 사용자는 이 코드가 매우 취약하다는 것을 알아차릴 것이다.만약 nivo 라이브러리에서 SVG 태그를 출력하는 방식을 바꾸면, 예를 들어 y축을 두 번째 하위 요소가 아닌 첫 번째 하위 요소로 이동하면, 이 코드는 잘못된 요소를 숨길 것이다.
이것은 현재 실행 가능한 것으로 데이터의 시각화를 더욱 명확하게 함으로써 진정한 가치를 제공한다는 것이다.

결론

지금까지 이것이 나와 니보의 여정이었다.이것은 인상적인 라이브러리로 유연한 기능이 많지만 데이터 모양을 동적으로 나타내고 기본 문서가 부족한 데 이상한 누락이 있다.

마지막으로 니보가 해냈다.

내장 CSS만 사용하여 SVG 렌더링

인라인 CSS에 대해 구성 요소 속성

을 통해 스타일 조정 허용

덮어쓰기 탭 숨기기 허용

Nivo 없음:

지정된 모든 데이터를 볼 수 있도록 자동으로 문자를 렌더링합니다margin 속성별로 오프셋을 수동으로 설정해야 함).

신규 사용자를 위한 시작 설명서

도서관이 어떻게 운영되는지에 대한 핵심 개념을 제공하는 문서

간단한 스트라이프 그래프를 간단하게 보여주기(오,🌶️!)

읽어주셔서 감사합니다!