d3 선형 차트 문자열 도메인 x 축

저는 D3에 비교적 익숙하며, 왜 무언가가 작동하지 않는 이유를 알 수 없습니다. d3으로 선형 차트를 그려보고 싶습니다. 하지만 축에 문제가 있습니다. 다음 코드를 잘못 어딘가에 가서 내가 해결하는 방법을 볼 수 없습니다와d3 선형 차트 문자열 도메인 x 축

...

var x = d3.scale.linear() 
.range([0, width]); 

var xAxis = d3.svg.axis() 
.scale(x) 
.orient("bottom"); 

x.domain(d3.extent(data, function(d) { return d.age; }));

d.age 정수 (같은 1, 2, 3 등) 인 경우, 작동이 잘. 하지만 x 축에 문자열이 필요합니다. ("네덜란드", "영국", "벨기에").

d.age가 정수인 경우 d.age가 문자열 인 경우 아무것도 표시하지 않으면 그래프를 그립니다.

선형 대신 서수를 사용하려고했지만 잘못된 차트가 나타납니다. (이상한보고있는 선. ..).

누군가 나를 도울 수 있기를 바랍니다.

출처

2013-03-22 Vincent Hogendoorn

축에 범주 형 값을 사용하려면 범주 형 (서수) 배율이 필요합니다. the documentation을 살펴보십시오. 이것은 또는 특정 브라우저에서 구현되지 않을 수 있습니다 자세한 내용은 here를 참조 - 코드는이 문자열 값을 추출 map를 사용하는

var x = d3.scale.ordinal().rangeRoundBands([0, width]); 
var xAxis = d3.svg.axis().scale(x).orient("bottom"); 

x.domain(data.map(function(d) { return d.country; }));

주처럼 보일 것입니다. 여기에 사용

var x = d3.scale.ordinal().rangePoints([0, width]);

출처

2013-03-22 14:53:03

고맙습니다이다, (등 선 루프) ... 나는 서수 규모를 필요로 알고 있지만, 그런 이상한 차트를했다. 하지만 rangeRoundBands 대신 range를 사용했습니다. 그래서 이것은 문제를 해결했습니다. (이제는 점과 x 축이 같은 레벨에 있지 않다는 약간의 문제 만 있습니다. (약간의 시프트가 있음)). –

rangeBands 대신 rangeRoundBands를 사용하는 이유는 무엇입니까? 앤티 엘리 어싱 인공물을 피하는 것 같지만 사용하는 또 다른 이유가 있는지 확실하지 않습니다. 감사. – yoyodunno

그게 유일한 이유입니다. 귀하의 반응에 대해 –

는 반응 바이올린 링크 http://jsfiddle.net/sk2Cf/

출처

2013-09-02 18:15:27 gunjan

주셔서 감사합니다. 위의 솔루션으로 이미 해결되었지만 제공 한이 솔루션도 효과가있었습니다. 나는 이것을 명심해야한다. –

감사합니다. 좀 더 우아한 해결책을 상상할 수 없었습니다. –

방금이 질문을 발견하고 바이올린 시도했지만, 내 코드에서 현재 가지고있는 것과 동일한 문제가 있습니다. 그래프의 x 위치가 x 배율 레이블의 x 위치와 같지 않습니다. 보간을 제거하면 더 잘 볼 수 있습니다. 선의 x 위치는 막대 차트 인 경우 막대의 왼쪽 상단 위치입니다. – kel

d3 선형 차트 문자열 도메인 x 축

답변

관련 문제