如何使用 d3js 设置比例？答案

【问题标题】：How to set up the scale with d3js?如何使用 d3js 设置比例？
【发布时间】：2021-12-29 20:20:11
【问题描述】：

我正在尝试构建条形图，但不断收到此错误：

SyntaxError: missing ) after argument list

它说问题出在 .range() 方法的行中，但我没有看到。在我看来一切都很好。

我从这里下载了数据集： https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json

let url = "data.json";

var svg = d3.select('body')
    .append('svg')
    .attr('width', 900)
    .attr('height', 460);

var yScale;

var arr = [];
    d3.json(url).then(function(data) {
        for (let i = 0; i < data.data.length; i++) arr[i] = data.data[i];
        }).then(() => 

          yScale = d3.scaleLinear()
                     .domain([0, d3.max(arr, (d) => d[1])])
                     .range([460, 0]);

    svg.selectAll('rect')
        .data(arr)
        .enter()
        .append('rect')
        .attr('fill', 'blue')
        .attr('height', d => d[1])
        .attr('width', 3)
        .attr('x', (d, i) => 4 * i)
        .attr('y', (d, i) => yScale(d[1]))

        );

        &lt;script src="https://d3js.org/d3.v6.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript json d3.js dataset bar-chart

【解决方案1】：

多行代码，你的箭头函数需要花括号

d3.json(url).then(function(data) {
    for (let i = 0; i < data.data.length; i++) arr[i] = data.data[i];
    }).then(() => {

      yScale = d3.scaleLinear()
                 .domain([0, d3.max(arr, (d) => d[1])])
                 .range([460, 0]);

    svg.selectAll('rect')
    .data(arr)
    .enter()
    .append('rect')
    .attr('fill', 'blue')
    .attr('height', d => d[1])
    .attr('width', 3)
    .attr('x', (d, i) => 4 * i)
    .attr('y', (d, i) => yScale(d[1]))

   });

【讨论】：