D3 육각 비닝 도메인과 범위

나는이 예제를 기반으로 육각형 비닝 그래프를 만들려고 해요. 그러나 나는 포인트를 설정하는 데 문제가 있고, 나는 이것이 범위 때문이라고 생각한다.D3 육각 비닝 도메인과 범위

var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
    width = 800 - margin.left - margin.right, // 740px 
    height = 500 - margin.top - margin.bottom; // 450px 

var points = [[1000,30],[5000,40],[8000,50]] 

var x = d3.scale.linear().domain([0, 10000]).range([0, width]); 
var y = d3.scale.linear().domain([18, 65]).range([height, 0]);

이러한 점을 사용하면 그래프가 공백으로 나타납니다.

그러나 나는 이러한 점을 시도하는 경우 :

var points = [[100,30],[200,40],[300,50]]

그들은 그래프에 표시되지만이 있어야 할 곳 근처에도 없습니다. 예를 들어 [100,30] 인 경우 [1400,62]과 같은 형식이어야합니다.

나는 이미 this post about scales on d3을 읽었습니다. 하지만 포인트를 올바르게 표시하는 방법을 찾지 못했습니다.

JSFiddle : http://jsfiddle.net/P6KWZ/ 당신의 jsfiddle의 두 가지가 있습니다

출처

2014-04-29 rlcabral

사용자가 가지고있는 값에 따라 저울의 도메인을 동적으로 설정해야합니다. –

나는 그것을 시험해 보았으나 행운이 없다. http://jsfiddle.net/P6KWZ/1/ – rlcabral

이 경우에 hexbin의 출력 (따라서 눈금에 대한 입력)이 픽셀 범위이기 때문에 ID 저울을 사용해야한다. 차트 : http://jsfiddle.net/P6KWZ/2/ –

. 첫째, 실제로 육각형을 배치하기 위해 만든 비늘을 사용하지 않고 있습니다. 둘째, 원래 값과 헥빈 빈에 의해 계산 된 값을 기반으로 도메인을 계산합니다. 저울을 사용하여 육각형

var projectedPoints = hexbin(points); 

var x = d3.scale.linear() 
    .domain(d3.extent(projectedPoints, function(d) { return d.x; })) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain(d3.extent(projectedPoints, function(d) { return d.y; })) 
    .range([height, 0]);

을 그리고 번역 :

그래서 먼저 비닝 값을 기준으로 도메인을 계산

.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })

전체 데모 here합니다.

출처

2014-04-29 14:58:33

D3 육각 비닝 도메인과 범위

답변

관련 문제