d3 v4 x 축과 막대가 정렬되지 않는 이유는 무엇입니까?

저는 x 축을 가지고 막대 차트를 만들었지 만 x 축의 막대와 눈금 간격을 정확히 맞출 수없는 이유는 없습니다. 지금은 진드기가 바 중앙의 오른쪽에 약간 있습니다.d3 v4 x 축과 막대가 정렬되지 않는 이유는 무엇입니까?

csv 파일 예 :

crop,records 
CASSAVA,350 
MAIZE,226 
TOMATOES,137

코드 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Abbie's attempt at D3</title> 
     <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
     <style> 
     svg { 
      background-color: rgba(227, 227, 227, 0.97); 
      } 
     .bar { 
      margin: 20px; 
      } 
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      var margin = {top: 20, right: 30, bottom: 100, left: 40}; 
      var w = 500 - margin.left - margin.right; 
      var h = 500 - margin.top - margin.bottom; 
      var barPadding = 5; 
      var cropData; 

    // load the csv file 
    d3.csv("crops.csv", function(error, data) { 
     data.forEach(function(d) { 
      d.records = +d.records; 
     }); 
     cropData = data; 

     var arrayLength = cropData.length; 
     var yMax = d3.max(cropData, function(d) { 
       return d.records; 
     }); 

     var yScale = d3.scaleLinear() 
          .domain([0, yMax]) 
          .range([h, 0]); 

     var xScale = d3.scaleBand() 
         .domain(cropData.map(function(d) { 
          return d.crop; 
         })) 
         .rangeRound([0, w]); 

     // create the svg 
     var svg = d3.select("body") 
        .append("svg") 
         .attr("width", w + margin.left + margin.right) 
         .attr("height", h + margin.top + margin.bottom) 
        .append("g") 
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     // bars 
     svg.selectAll("rect") 
      .data(cropData) 
      .enter() 
      .append("rect") 
      .attr("x", function(d, i) { 
       return i * xScale.bandwidth() + 5; 
       }) 
      .attr("y", function(d) { 
       return yScale(d.records); 
       }) 
      .attr("width", xScale.bandwidth() - 5) 
      .attr("height", function(d) { 
       return h - yScale(d.records); 
       }) 
      .attr("fill", "teal") 
      .attr("class", "bar"); 

     // x Axis 
     var xAxis = d3.axisBottom(xScale); 
     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + h + ")") 
      .call(xAxis) 
      .selectAll("text") 
       .style("text-anchor", "end") 
       .attr("dx", "-.8em") 
       .attr("dy", ".15em") 
       .attr("transform", function(d) { 
        return "rotate(-60)" 
        }); 

     // y Axis 
     var yAxis = d3.axisLeft(yScale); 
     svg.append("g") 
      .call(yAxis); 

    </script> 
</body>

내가 바로 rect의 x 및 width 속성에 i * xScale.bandwidth() + 5 및 xScale.bandwidth() - 5으로 그 일을하거나하지 않는 것입니다 건가요 그것을 할 올바른 방법? 막대를 변경하면 x 축의 틱 간격을 어떻게 바꿀 수 있습니까? 그들은 둘 다 xScale을 사용하므로 나는 그것과 관련이 있어야한다고 생각합니다.

출처

2017-01-06 Abbie

다음과 같이 변경합니다. 대역폭의 퍼센트

var xScale = d3.scaleBand() 
    .domain(cropData.map(function(d) { 
    return d.crop; 
    })) 
    .rangeRound([0, w]) 
    .padding(0.1);

이 의지 스페이스 바 :

첫째, padding 당신의 xScale을 소개합니다.

둘째, 당신의 xScale를 사용하여 막대를 배치 :

svg.selectAll("rect") 
    .data(cropData) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) { 
    return xScale(d.crop); //<-- place by xScale 
    }) 
    .attr("y", function(d) { 
    return yScale(d.records); 
    }) 
    .attr("width", xScale.bandwidth()) //<-- no -5 padding takes care of breaks

의 Runnable 코드 :

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Abbie's attempt at D3</title> 
 
    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <style> 
 
    svg { 
 
     background-color: rgba(227, 227, 227, 0.97); 
 
    } 
 
    
 
    .bar { 
 
     margin: 20px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script type="text/javascript"> 
 
    var margin = { 
 
     top: 20, 
 
     right: 30, 
 
     bottom: 100, 
 
     left: 40 
 
    }; 
 
    var w = 500 - margin.left - margin.right; 
 
    var h = 500 - margin.top - margin.bottom; 
 
    var barPadding = 5; 
 
    var cropData; 
 

 
    // load the csv file 
 
    //d3.csv("crops.csv", function(error, data) { 
 

 
     var data = [{ 
 
     "crop": "CASSAVA", 
 
     "records": "350" 
 
     }, { 
 
     "crop": "MAIZE", 
 
     "records": "226" 
 
     }, { 
 
     "crop": "TOMATOES", 
 
     "records": "137" 
 
     }]; 
 

 
     data.forEach(function(d) { 
 
     d.records = +d.records; 
 
     }); 
 
     cropData = data; 
 

 
     var arrayLength = cropData.length; 
 
     var yMax = d3.max(cropData, function(d) { 
 
     return d.records; 
 
     }); 
 

 
     var yScale = d3.scaleLinear() 
 
     .domain([0, yMax]) 
 
     .range([h, 0]); 
 

 
     var xScale = d3.scaleBand() 
 
     .domain(cropData.map(function(d) { 
 
      return d.crop; 
 
     })) 
 
     .rangeRound([0, w]) 
 
     .padding(0.1); 
 

 
     // create the svg 
 
     var svg = d3.select("body") 
 
     .append("svg") 
 
     .attr("width", w + margin.left + margin.right) 
 
     .attr("height", h + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
     // bars 
 
     svg.selectAll("rect") 
 
     .data(cropData) 
 
     .enter() 
 
     .append("rect") 
 
     .attr("x", function(d, i) { 
 
      return xScale(d.crop); 
 
     }) 
 
     .attr("y", function(d) { 
 
      return yScale(d.records); 
 
     }) 
 
     .attr("width", xScale.bandwidth()) 
 
     .attr("height", function(d) { 
 
      return h - yScale(d.records); 
 
     }) 
 
     .attr("fill", "teal") 
 
     .attr("class", "bar"); 
 

 
     // x Axis 
 
     var xAxis = d3.axisBottom(xScale); 
 
     svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + h + ")") 
 
     .call(xAxis) 
 
     .selectAll("text") 
 
     .style("text-anchor", "end") 
 
     .attr("dx", "-.8em") 
 
     .attr("dy", ".15em") 
 
     .attr("transform", function(d) { 
 
      return "rotate(-60)" 
 
     }); 
 

 
     // y Axis 
 
     var yAxis = d3.axisLeft(yScale); 
 
     svg.append("g") 
 
     .call(yAxis); 
 
     
 
    // }); 
 
    </script> 
 
</body>

출처

2017-01-06 15:18:36 Mark

감사합니다! 틀린 물건의 조합은 그것을 완전히 어 지르고 있었다! 지금은 좋아 보인다 :-) – Abbie

d3 v4 x 축과 막대가 정렬되지 않는 이유는 무엇입니까?

답변

관련 문제