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

Posted 2023-02-22

【中文标题】带有序数轴和 json 数据的 JavaScript d3 折线图

【英文标题】：JavaScript d3 line graph with ordinal axis and json data

【发布时间】：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]”。我不知道如何继续显示图表。你有什么解决办法吗？

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

【参考方案1】：

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

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

【讨论】：

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