D3.js를 사용하는 "한 줄로"그룹화 된 막대 차트

debugcn 에 게시 Dev

라파 다 실바

D3.js로 특정 막대 차트를 만들려고하는데 일치 할 수있는 예를 찾을 수 없습니다. 두 개의 계열 (하나는 음수, 하나는 일반적으로 양수)이 같은 선에 배치되지만 누적되지 않은 막대 차트를 코딩합니다.

명확하지 않은 것 같아서 Highcharts에서 만들었습니다 . D3를 사용하여 이전에했던지도와 차트를 연결하고 싶습니다.

그래서 누군가 나를 도울 수있는 예를 알고 있습니까? 시리즈가 정렬되지 않은 경우에도 차트를 직접 정렬 할 수 있습니까? 두 시리즈가 정시에 포지티브 인 경우 작은 시리즈가 가장 큰 시리즈 앞에 표시됩니까?

크리스토퍼 치체

요령은 데이터를 주문하는 것입니다. 이렇게하려면 다음 [d3.ascending()][1]함수를 사용할 수 있습니다 .

다음 예제 데이터를 사용합니다.

data = [{
    name: "A",
    valueRight: 1,
    valueLeft: 2
}, {
    name: "B",
    valueRight: 4,
    valueLeft: 5
}, ...]

우리는해야:

function leftBound(node) {
    return d3.max([node.valueLeft,-node.valueRight])
}

function rightBound(node) {
    return d3.max([node.valueRight,-node.valueLeft])
}
dataSort = function(a,b) {
    res = d3.descending(leftBound(a),leftBound(b))
    if(res==0) {
        return d3.descending(rightBound(a),rightBound(b))
    } else {
        return res
    }
}

재사용 가능한 차트의 경우 사용할 수도 [selection.sort()][2]있지만 2 개의 막대 범주에 대해이 작업을 수행해야합니다.

JsFiddle : http://jsfiddle.net/vgZ6E/55/

스크린 샷 :

스크린 샷

원본 코드는 다음 질문에서 나온 것 입니다. 각 레코드에 대한 pos & neg 막대 (승 / 패)가있는 d3.js 막대 차트

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

D3.js를 사용하는 "한 줄로"그룹화 된 막대 차트

D3.js를 사용하는 "한 줄로"그룹화 된 막대 차트

응답 성이없는 그룹화 된 d3 막대 차트의 응답하지 않는 막대

D3.js의 그룹화 된 막대 차트

D3 : 그룹화 된 막대 차트의 각 막대 상단에 레이블을 추가하는 방법

그룹화 된 막대 차트에서 사각형 크기를 줄이는 방법 d3js v4

그룹화 된 막대 차트에서 D3 브러싱

d3에 다른 그룹이있는 그룹화 된 범주 막대 차트?

ggplot2를 사용하는 R의 그룹화 된 막대 차트

ggplot2를 사용한 그룹화 된 막대 차트

D3.js : 그룹화 된 막대 차트에서 JSON 데이터를 읽는 방법

강화 된 정수를 업데이트하여 한 줄로

D3 그룹화 된 막대 차트가 x 척도를 따라 퍼지지 않습니다.

D3.js 그룹화 된 막대 차트 범례 누락 된 데이터

d3 json 파일을 사용하는 도구 설명이 포함 된 반응 형 그룹 막대 차트

D3.js- 그룹화 된 막대 차트를 확대하는 동안 사각형 외부 영역을 자르는 방법

반응 + d3 누적 막대 차트를 그룹화하는 방법은 무엇입니까?

Pandas를 사용하여 데이터 프레임에서 (그룹화 된) 막대 차트를 그리는 방법

ggplot2를 사용하여 그룹화 된 막대 차트에 대한 오차 막대를 그리는 방법은 무엇입니까?

JavaScript / D3를 사용하는 차트의 간격 막대

연속 된 날짜 범위를 한 줄로 그룹화

d3js v4의 그룹화 된 막대 차트에 텍스트 추가

d3에서 그룹화 된 막대 차트 데이터 오른쪽에 두 번째 y 축을 표시하는 방법

그룹화 된 막대가있는 세로 막대 차트를 표시합니다.

R barplot 함수를 사용하는 그룹화 된 막대도

react-chartjs-2가있는 그룹화 된 막대 차트

너무 밀접하게 그룹화 된 막대 차트 열

MPAndroidChart 그룹화 된 막대 차트 onclick

그룹화 된 막대 그림에 오차 막대를 추가하는 방법은 무엇입니까?

그룹화 된 막대 차트를 플로팅하고 주석을 추가하는 방법

mysql 데이터베이스를 사용하는 d3의 막대 차트