D3 rect + color가 표시되지 않습니다.

Question

히트 맵을 작성하기 위해 D3와 함께 놀고 있습니다. NxN 사각형을 만들어서 색상을 변경하고 싶습니다. 그러나 첫 번째 사각형 만 파란색으로 표시되고, 나머지는 HTML 속성에 따라 색상이 설정되지만 페이지에는 나타나지 않습니다. (- 이 사실을 참조 편집하지 <g>)

size = 30; 
    length = myJSON.length; 
    numRows = length /2; 
    numCols = length/2; 

    var svg = d3.select("div#heatchart").append("svg").attr("width",size).attr("height",size); 

    svg.selectAll("rect").data(myJSON).enter().append("rect").attr("x",function(d,i){ 
     var x = Math.floor(i%numRows) * (size+1); 
     return x; 
    }).attr("y",function(d,i){ 
     var y = Math.floor(i/numCols) * (size+1); 
     return y; 
    }).attr("width",function(d,i){ 
     return size; 
    }).attr("height",function(d,i){ 
     return size; 
    }).attr("fill", function(d,i) { 
     return "rgb(0, 0, 255)"; 
    }); 

Answer 1

당신은 SVG 그룹 요소가 필요합니다.

수정은 그래서이

var svg = d3.select("div#heatchart") 
      .append("svg") 
      .append("g") 
      .attr("width", size) 
      .attr("height", size); 

예처럼 보인다 http://jsfiddle.net/4tz5wk91/

편집 이 예제는 작동하지만 그 이유는 설명하지 않습니다. attr 함수는 더 이상 svg 요소에 영향을 미치지 않으므로 모든 요소를 ​​표시 할 수있을만큼 큰 기본 크기를 가져옵니다. 이 경우 그룹에 적용된 width 및 height 속성은 실제로 적용되지 않습니다. @ jshanley의보다 완전하고 정확한 해결책을보십시오.

Answer 2

하나의 사각형 만 보게되는 이유는 <svg> 요소의 크기를 변수 size (30)과 같게 설정했기 때문입니다. 다른 사각형은 그려지지만 범위를 벗어납니다 svg 문서의 너무 보이지 않습니다.

수정 한 후에는 length을 절반으로 나누어 기준으로 행과 열의 수를 설정하므로 레이아웃 문제가 계속 발생합니다. NxN 정사각형을 만들기 위해 정말로하고 싶은 것은 행과 열의 수를 제곱근 인 length으로 정하는 것입니다. 데이터 길이가 완벽한 사각형이 아닐 경우, Math.ceil을 사용하여 반올림 할 수 있습니다. 당신은 표시 할 필요가 얼마나 많은 행과 열

var size = 30; 
var n = myJSON.length; 
var numRows = Math.ceil(Math.sqrt(n)), 
    numCols = numRows; 

는 그런 다음에 따라 SVG의 크기를 설정할 수 있습니다 : 같이 그것을 시도 설정,

var svg = d3.select('div#heatchart').append('svg') 
    .attr('width', size * numCols) 
    .attr('height', size * numRows); 

을 마지막으로 광장에서 그들을 배치에 파란색으로 채우기 :

svg.selectAll('rect') 
    .data(myJSON) 
    .enter().append('rect') 
    .attr('x', function(d,i) { return (i % numCols) * size; }) 
    .attr('y', function(d,i) { return Math.floor(i/numRows) * size; }) 
    .attr('width', size) 
    .attr('height', size) 
    .attr('fill', 'blue'); 

HERE이 예입니다.