带有序数轴和 json 数据的 JavaScript d3 折线图答案

【问题标题】：JavaScript d3 line graph with ordinal axis and json data带有序数轴和 json 数据的 JavaScript d3 折线图
【发布时间】：2022-01-23 21:35:03
【问题描述】：

我是使用 d3 创建图表的新手，我正在尝试使用序数轴构建折线图。我已经成功地可视化了 y 轴和 x 轴，但是我无法创建线。

我有这个代码：

    var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var data = [{
        name: "cat",
        value: 10
    }, {
        name: "dog",
        value: 3
    }, {
        name: "pig",
        value: 7
    }, {
        name: "bird",
        value: 7
    }];


    //append the svg object to the body of the page
    var svg = d3.select("#div-svg"  ).append('svg')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    //set scale
    var xScale = d3.scaleBand()
            .domain(d3.extent(data, function(d){return d["name"]}))
            .range([0, width]),
        yScale = d3.scaleLinear()
            .domain([min(this.value_array), max(this.value_array)])
            .range([height, 0]);
       
    //add Axis
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale));

    svg.append("g")
        .call(d3.axisLeft(yScale));

到这里一切正常。下一部分是不起作用的部分。

   //line
    var line = d3.line()
        .x(function(d) { return xScale(d[0]); }) 
        .y(function(d) { return yScale(d.value); })

如果我输入 d[0]，我会收到以下错误“type number is not assignable to parameter of tye string”。如果我输入 d.name，我会收到以下错误“'name' does not exist on type [number,number]”。我不知道如何继续显示图表。你有什么解决办法吗？

我还希望它是一个面积图，而不仅仅是一个折线图，以防程序发生变化。

【问题讨论】：

标签： javascript d3.js graph charts

【解决方案1】：

d3.extent 不是您要用于域的。您需要一个包含每个条形名称的数组。

var xScale = d3.scaleBand()
            .domain(data.map(function(d){return d["name"]}))
            .range([0, width])

【讨论】：

感谢您的回答，我也试过了，但报同样的错误。