Question

我有一个脚本来构建完整的折线图。它工作正常，但我想更普遍地工作。因此，我想在不知道列的标题的情况下从CSV导入和转换字符串。

我可以使用以下方法将数据转换为数组：

var data = d3.csv("data.csv")
        .row(function(d, i, columns)
             {
                for (var i = 0; i < columns.length; i++) 
                    {  
                        d[columns[i]] = +d[columns[i]]
                    } 
                return d;


        })
        .get(function(d){console.log(d);});

但我无法使用此数据来构建图表。

在我这样导入之前：

d3.csv("Messdaten.csv", function(error, data) {
data.forEach(function(d){
d.T = +d.Time_seconds;
d.Y1 = +d.Temp2_C;
d.Y2 = +d.Temp3_C;
});

这样我每列都有变量，我可以用它来构建Axes / Lines等。

如何使用我的＆＃34; new＆＃34;访问单独的列？方法

编辑我的代码以便更好地理解：

var margin = {top: 100,
          right: 200, 
          bottom: 100, 
          left: 200
         },
width =window.innerWidth-margin.left-margin.right,
height =window.innerHeight-margin.top-margin.bottom;


var x = d3.scaleLinear()
    .range([0, width]);


var yTemp = d3.scaleLinear()
    .range([height, 0]);


var xAxis = d3.axisBottom(x)
            .tickSizeInner(-height);

var yAxisTemp = d3.axisLeft(yTemp)
            .tickSizeInner(-width+margin.right-margin.left);


var line1 = d3.line()                           
    .x(function(d){return x(d.T);})     
    .y(function(d){return yTemp(d.Y1);});
var line2 = d3.line()
    .x(function(d){return x(d.T);})     
    .y(function(d){return yTemp(d.Y2);});


var svg = d3.select(win1.document.body).append("svg")   
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

var Diagramm1 = svg.append("g") 
.attr("transform", "translate(" + margin.left + ","+ margin.top + ")");


svg.append("defs")
    .append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width) 
    .attr("height", height);

var zoom = d3.zoom()
.scaleExtent([1, 32])               
.translateExtent([[0, 0], [width, height]]) 
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);

svg.call(zoom);


d3.csv("Messdaten.csv", function(error, data) {
data.forEach(function(d){
d.T = +d.Time_seconds;
d.Y1 = +d.Temp2_C;
d.Y2 = +d.Temp3_C;
});


x.domain([0, 100+d3.max(data, function(d){return d.T})]);
yTemp.domain([0, 5+d3.max(data, function(d){return d.Y1})]);
Diagramm1.append("path")
    .datum(data)
    .attr("class", "line1")
    .attr("d", line1);
Diagramm1.append("path")
    .datum(data)
    .attr("class", "line2")
    .attr("d", line2);
Diagramm1.append("g")
    .attr("class", "axis axis--y")
    .call(yAxisTemp)
Diagramm1.append("text")
    .attr("class", "label1")
    .attr("x",-50)
    .attr("y", 20)
    .text(yAxisName1);
    Diagramm1.append("text")
    .attr("class", "label2")
    .attr("x",-50)
    .attr("y", 40)
    .text(yAxisName2);
Diagramm1.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("class", "label")
    .attr("x",width)
    .attr("y", 28)
    .text(xAxisName);

})

Answer 1

此处的问题是d3.csv 不会返回任何内容。实际上，它返回一个与请求相关的对象，这显然与数据本身无关。

因此，这......

var data = d3.csv(etc...)

......根本不起作用。

我们可以清楚地表明这一点。看看this plunker中的控制台，我正在使用您的代码。这是你得到的data：

{header: ƒ, mimeType: ƒ, responseType: ƒ, timeout: ƒ, user: ƒ, …}

同样，它是与请求相关的对象，而不是您加载的CSV。

解决方案：将行函数放在URL和回调之间，并使用回调中的数据数组：

d3.csv("data.csv", function(d, i, columns) {
    for (var i = 0; i < columns.length; i++) {
        d[columns[i]] = +d[columns[i]]
    }
    return d;
}, function(data) {
    //use data here
})

使用CSV中的导入数据创建包含D3.js的折线图

1 个答案: