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

Question

我是使用 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]我会收到以下错误“类型号不可分配给 tye 字符串的参数”。 如果我输入d.name我会收到以下错误“ 'name' does not exist on type [number,number] ”。 我不知道如何继续显示图表。 你有什么解决办法吗？

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

Answer 1

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

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