D3 Y 스케일, y 대 높이?

Question

나는 D3를 배우고, 그리고 내가이 두 가지와 같은 시각화 얻을 것을 볼 수 있습니다

 
var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset)]) 
    .range([h, 0]); 

svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr({ 
     x: function(d, i) { return xScale(i); }, 
     y: function(d) { return yScale(d); }, 
     width: w/dataset.length, 
     height: function(d) { return h - yScale(d); }, 
     fill: "teal" 
    }); 

또는 설정 Y : 높이 속성을 사용

 
var w = 600; 
var h = 100; 

var dataset = [1, 6, 3, 4, 10, 4, 9] 

var svg = d3.select("body").append("svg") 
    .attr("height", h) 
    .attr("width", w) 

var xScale = d3.scale.linear() 
    .domain([0, dataset.length]) 
    .range([0, w]); 

을 :

 
var yScale = d3.scale.linear() 
    .domain([0, d3.max(dataset)]) 
    .range([0, h]); 

svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr({ 
     x: function(d, i) { return xScale(i); }, 
     y: function(d) { return h - yScale(d); }, 
     width: w/dataset.length, 
     height: function(d) { return yScale(d); }, 
     fill: "teal" 
    }); 

그렇다면 왜 그렇습니까?

Answer 1

나는 나중에 장을 보았으므로 이전 옵션처럼 보였습니다. yAxis를 만들 때 range([h, 0])을 사용하는 것이 더 좋습니다. 나는 후자의 옵션 range([0, h])를 사용하는 경우, 그래프는 y 축없이 변환 콜 (다음과 같이 나온다 :.

을 일반적으로 하나가 원하는 것이 무엇되지 않는 나는`같은데요