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])