Как добавить отступ между прямоугольниками и не допустить их выхода из SVG - PullRequest
Новая
       9

Как добавить отступ между прямоугольниками и не допустить их выхода из SVG

0 голосов
/ 18 июня 2020

Итак, я делаю это упражнение freecodecamp, в котором мне нужно сделать гистограмму, используя необработанные js и d3. js

проблема возникает при размещении столбцов по оси x, они складываются друг на друга. Я знаю, что этого можно избежать, увеличивая значение x, но в моей гистограмме значение x вычисляется с помощью xScale, который использует scaleTime (поскольку положение полосы должно меняться в зависимости от даты), как я могу добавить пробел между столбцами если домен xscale не дает мне возможности добавить маржу? 

const req = new XMLHttpRequest();
let datapack = "";
req.open("GET",'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json',true);
req.send();
req.onload = function(){
  const json = JSON.parse(req.responseText);
 const datapack = json.data;

    const w = 900;
    const h = 500;
    const padding = 30;


    var GDP = datapack.map(function(item) {
    return item[1]
  });

    var Year = datapack.map((item)=>{
      return new Date(item[0]);

    });


const xScale = d3.scaleTime()
                .domain([d3.min(Year),d3.max(Year)])
                .range([padding, (w - padding)]);


const hScale = d3.scaleLinear()
                .domain([d3.min(GDP),d3.max(GDP)])
                .range([padding, h - padding]);




 const svg = d3.select("#app")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);

svg.selectAll("rect")
       .data(GDP)
       .enter()
      .append("rect")
  .attr("class","bar")
  .attr('x', function(d, i) {
      return xScale(Year[i]);
    })
  .attr('y', function(d, i) {
      return h  - hScale(d) -(padding/2);
    })
  .attr('height', function(d) {
      return hScale(d);
    });



};

вот codepen , показывающий, что я имею в виду

...