Javascript 如何将范围表单数据映射到X轴

我有一个数据集，年龄字段表示为范围，例如0-8,9-17,18-23，等等

我想在条形图的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]);

---

这些年龄段不是连续的；它们是有序的。本质上，这些标签碰巧有特定的顺序，而不是数字

不要使用

d3.scaleLinear（）

，而是在域为

[“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.
    .attr("x", d => x(d.age))
    .attr("width", x.bandwidth());

---

为什么不按索引映射，然后用

d.age

？@Coola什么是按索引映射？我怎么做？例如，我是D3新手，将范围映射到

[0，dataset.length]

。有关更详细的解释，请提供更多代码以供审阅。@Coola这是我计划做的：var xScale=d3.scaleLiner（）.domain（[0，d.ageMax]）.range（[0，chartWidth]）；var xAxis=d3.axisBottom（xScale）；我想你的意思是把d.ageMax换成d.length？如何在此处指定长度？将条形图的完整代码添加到问题中以供查看，我可以轻松帮助您解决问题，或者您可以将域设置为

域（[0，d.length-1]）

，然后在调用刻度标签的轴时，从数据集中调用年龄值。我使用了ScaleBand（），我将代码上传到问题中。你能帮我检查一下Scaleband（）部分吗。xScale的域如何？

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