Question

我遇到了麻烦。我正在尝试使用D3和具有日期和值的csv文件中的数据制作简单的折线图。

我在下面附加了我的代码。我遇到的问题是它不会为我划清界限。刚开始，我认为我的数据需要排列在数组中，就像其他一些在线示例一样，但其他示例只是像我一样做，而且效果很好。如果需要采用数组格式，该如何做呢？如果没有，知道什么地方可能出问题了吗？

任何帮助都会很棒：)

    //setup
var margin4 = {top:10, bottom:30, right:10, left:30};
var height4 = 400 - margin4.top - margin4.bottom;
var width4 = 600 - margin4.right - margin4.left;

var svg4 = d3.select(".fuel")
    .append('svg')
    .attr("height", height4 + margin4.top + margin4.bottom)
    .attr("width", width4 + margin4.right + margin4.left)
    .append("g")
    .attr("transform", "translate(" + margin4.left + "," + margin4.top + ")");


//get the data and make line


d3.csv("Weekly Fuel Prices.csv", function(data){

        //x-axis with the date
        var x4 = d3.scaleTime()
            .domain(d3.extent(data,function(d) {return d.date;}))
            .range([0,width4]);
        svg4.append("g")
            .attr("transform", "translate(0," + height4 + ")")
            .call(d3.axisBottom(x4));

        // y axis with prices
        var y4 = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return d.value; })])
            .range([ height4, 0 ]);
        svg4.append("g")
            .call(d3.axisLeft(y4));

    console.log(data);


        //line 
        var line = d3.line()
        .x(function(d) { return x4(d.date) })
        .y(function(d) { return y4(d.value) });

        // Add the line
        svg4.append("path")
            .data(data)
            .attr("fill", "none")
            .attr("stroke", "grey")
            .attr("stroke-width", 1.5)
            .attr('d', line);
    }
)

D3折线图未从CSV数据绘制我的路径

0 个答案: