Как отобразить данные формы диапазона на ось X - PullRequest
Новая
       26

Как отобразить данные формы диапазона на ось X

0 голосов
/ 31 октября 2019

У меня есть набор данных, в котором поле возраста представлено в виде диапазона, например 0--8,9--17,18--23 и т. Д. 

year,gender,age,population
2002,Female,0--8,0
2002,Female,9--17,25
2002,Female,18--20,291
2002,Female,21--23,375
2002,Female,24--26,212
2002,Female,27--29,108
2002,Female,30--38,74
2002,Female,39--47,0

Я хочу использовать этот возраст по оси X моего барплота. Как я могу рассчитать домен в этой форме диапазона? Похоже, я не могу просто использовать 

d3.max(dataset, function(d) { return +d.age})

Ниже приведен мой код до создания yScale: 

    function dataProcessor(d) {
    return {
        year: +d.year,
        gender: d.gender,
        age: +d.age,
        population: +d.population

    };
}



width = 600
height = 400



var svg = d3.select("svg");

var margin = {top: 50,
           right: 50,
           bottom: 50,
           left: 100
        };

chartWidth = +svg.attr("width") - margin.left - margin.right;
chartHeight = +svg.attr("height") - margin.top - margin.bottom;

g = svg.append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.csv('years.csv', dataProcessor).then(function(data) {



});

var xScale = d3.scaleBand().rangeRound([0, width])
          .padding(0.1)
          .domain([0, data.length-1])

var populationMax = d3.max(data, function(d) {
       return +d.population
});

var populationMin = d3.min(data, function(d) {
      return +d.population
});

var yScale = d3.scaleLinear()
               .domain([populationMin, populationMax])
               .range([height, 0]);

1 Ответ

0 голосов
/ 31 октября 2019

Эти возрастные диапазоны не являются непрерывными;они порядковые. По сути, это метки, которые имеют определенный порядок, а не цифры.

Вместо использования d3.scaleLinear() используйте d3.scaleBand(), где доменом является ["0--8", "9--17", ... , "39--47"]. d3.scaleBand() отображает из дискретного домена в непрерывный диапазон. Он предназначен для использования в таких вещах, как гистограммы, поэтому он также включает в себя метод bandwidth(), который сообщает вам, какова ширина каждой полосы в зависимости от размера вашего домена, диапазона и любого отступа, для которого вы настроили масштаб. 

let x = d3.scaleBand(["0--8", "9--17", "18--20", "21--23",
                      "24--26", "27--29", "30--38" , "39--47"]);
    .range([[0, width]);

Затем (при условии, что у вас уже есть привязка к данным, называемая bars), вы можете позиционировать каждый столбец с чем-то вроде 

bars.
    .attr("x", d => x(d.age))
    .attr("width", x.bandwidth());
...