d3js에서 기본 세로 막 대형 차트를 만드는 방법은 무엇입니까?

Question

나는 d3js를 시험해보고 있는데, 첫 번째 기본 열 (수직 막대) 차트 작업을 얻는 데 문제가있다. 내가 이해하기 힘든 유일한 점은 스케일링 문제뿐입니다. 나는 X를 만들고 싶어 및 y 축 레이블 틱하지만 다음과 같은 문제가 : 값이

{ 
"regions": 
["Federal","Tigray","Afar","Amhara","Oromia","Gambella","Addis Ababa","Dire Dawa","Harar","Benishangul-Gumuz","Somali","SNNPR "], 
"institutions": 
[0,0,34,421,738,0,218,22,22,109,0,456] 
} 

1. y 축에있다 :

   모든

   우선 여기 내 데이터입니다 그러나 순서는 바뀐다. 다음은 코드입니다.

   var y = d3.scale.linear(). 도메인 ([0, d3.max (data.institutions)]). 범위 ([0, 높이]);

는 내가 y 축 만들려면이 규모를 사용

var yAxis = d3.svg.axis().scale(y).orient("left"); 

을하고, SVG 요소 여기

svgContainer.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Institutions"); 

문제로이 축을 추가입니다 y 축 상단에서 0부터 시작하여 하단에서 700으로 시작합니다.하지만 반대 순서 여야합니다.

다른 문제는 x 축이 있습니다. 나는 위에 놓은 값이 내가 위에있는 지역 이름에 있기 때문에 서수 척도를 갖고 싶다. 그래서 여기에 내가 한 일이 있습니다.

var x = d3.scale.ordinal() 
        .domain(data.regions.map(function(d) { return d.substring(0, 2); })) 
        .rangeRoundBands([0, width], .1); 

다음 축 마지막으로

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

과는 SVG 요소 여기

svgContainer.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

레이블이 나타나는 문제뿐만 아니라 진드기를하지만 그들이 밖으로 간격되지 않습니다에 추가 균등하게 그리는 직사각형의 중심에 일치하지 않습니다. 여기에 완전한 코드가있어서 무슨 일이 일어나고 있는지 볼 수 있습니다. http://jsfiddle.net/GmhCr/4/

편집 주시기 바랍니다 :

$(document).ready(function(){ 

    d3.json("institutions.json", draw); 

}); 

function draw(data){ 
    var margin = {"top": 10, "right": 10, "bottom": 30, "left": 50}, width = 700, height = 300; 

    var x = d3.scale.ordinal() 
        .domain(data.regions.map(function(d) { return d.substring(0, 2); })) 
        .rangeRoundBands([0, width], .1); 


    var y = d3.scale.linear() 
       .domain([0, d3.max(data.institutions)]) 
       .range([0, height]); 

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

    var yAxis = d3.svg.axis() 
         .scale(y) 
         .orient("left"); 

    var svgContainer = d3.select("div.container").append("svg") 
          .attr("class", "chart") 
          .attr("width", width + margin.left + margin.right) 
          .attr("height", height + margin.top + margin.bottom) 
          .append("g") 
          .attr("transform", "translate(" +margin.left+ "," +margin.right+ ")");   

    svgContainer.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

    svgContainer.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
       .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .text("Institutions"); 

    svgContainer.selectAll(".bar") 
     .data(data.institutions) 
     .enter() 
     .append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d, i) {return i* 41;}) 
     .attr("y", function(d){return height - y(d);}) 
     .attr("width", x.rangeBand()) 
     .attr("height", function(d){return y(d);}); 

} 

Answer 1

나는 바이올린에 코드를 넣어! 이미 두 가지 문제를 모두 고쳤습니다. 거꾸로의 y 축를 해결하려면

---

는 범위 함수 인수의 값을 교환 :

var y = d3.scale.linear().domain([0, d3.max(data.institutions)]).range([height, 0]); 

당신이 스케일을 변경하면 막대에 대한 코드를 조정하는 것을 잊지 마세요!

var x = d3.scale.ordinal() 
    .domain(data.regions.map(function(d) { 
     return d.substring(0, 2);})) 
    .rangeRoundBands([0, width], .1); 

svgContainer.selectAll(".bar") 
    .data(data.institutions) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d, i) {return i* 41;}) 
    .attr("y", function(d){return height - y(d);}) 
    .attr("width", x.rangeBand()) 
    .attr("height", function(d){return y(d);}); 

당신은 0.1 rangeRoundBands의 패딩을 지정하고 x 및 폭을 계산할 때 당신은 패딩을 무시 :

---

바, x 축 사이의 불일치의 소스는 여기에서 찾을 수 있습니다 막대의 값.이는 예를 들어 0의 패딩 올 :

var x = d3.scale.ordinal() 
    .domain(data.regions.map(function(d) { 
     return d.substring(0, 2);})) 
    .rangeRoundBands([0, width], 0); 

svgContainer.selectAll(".bar").data(data.institutions).enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d, i) { 
     return i * x.rangeBand(); 
    }) 
    .attr("y", function(d) { 
     return y(d); 
    }) 
    .attr("width", function(){ 
     return x.rangeBand(); 
    }) 
    .attr("height", function(d) { 
     return height -y(d); 
    }); 

패딩은 패딩 예약 방법 도메인 대부분 결정한다. 너비를 700, 패딩을 0.1로 사용하면 정확히 70 픽셀이 패딩에 사용됩니다. 즉, 패딩에 사용할 수 있도록 모든 막대의 x 값에 70/data [ "regions"] 길이의 픽셀을 추가해야합니다.