D3 바 차트 I 수직 막대 (D3)에 그려진 간단한 막대 그래프를 가질 거꾸로

반전하려면 아래 내용을 읽으십시오. range()을 y 축으로 변경해야합니다. 그래서,이 변경 :

.range([0, chart.style('height')]);

을 여기에 :

.range([chart.style('height'), 0]);

을하지만,이 차트의 역 그림처럼 보이는 - 위의 공간 에 막대의 각 그리기를하고 떠나 바 (아래에서 그린)는 투명합니다. 내가 도대체 뭘 잘못하고있는 겁니까? 은 y 속성을 설정

는

당신은 범위를 반전에서 정확합니다.

은 또한 사용자의 직사각형과 같은 추가되어야

.attr('y', function(d) { return y(d.percent); }) 
    .attr('height', function(d,i){ return height - y(d.percent); });

2013-02-21 21:15:06 cmonkey

좋아, 고마워. 막대 차트 예제도 보지 못했지만, 유용합니다. –

정말 좋은 솔루션입니다! – Kamil

작동하는 것 같다 : D3의 기본 막대 차트 당

.attr('y', function(d){ return (height - parseInt(y(d.percent))); })

2013-02-21 21:14:26

감사합니다. 마이크는 나중에 차트를 뒤집는 것보다 바를 움직여야한다고 생각합니다. 나중에 차트가 y 축 표시에 문제가 발생할 수 있습니다. –

X 및 Y 좌표가 좌상에 svg 시작합니다. y가 맨 아래에 시작되기를 원합니다. 아래 코드는 당신의 라인을 따라 몇 가지 기능을 추가하고 가정

.attr('y', function(d) { return height - d; })

: 당신이 원하는대로

svg.selectAll('rect') 
    .data(dataset) 
    .enter() 
    .append('rect')

이 막대 플롯 행위를 만들기 위해, 축 위의 거리 data[i]에서 시작하는 Y의 속성을 설정

그런 다음 거리를 남은 길이 인 data[i]을 축까지 연장해야합니다.

.attr('height', function(d) { return d; })

그리고 그게 전부입니다!

2017-08-08 05:10:20

답변