我有以下代码用于带有标题的csv的d3条形图。我删除了仅提及相关部分的代码。我正在使用d3 v5。
data.csv：
Plan, TotalTime, Time1, Time2
A, 0.07, 0.04, 0.03
B, 0.08, 0.02, 0.06
index.js
d3.csv("data.csv", d3.autoType).then(function(data) {
x.domain(data.map(function(d) { return d.Plan; }));
y.domain([0, d3.max(data, function(d) { return d.TotalTime; })]);
g.selectAll(.bar)
.data(data)
.enter().append("rect")
.attr("class", "TotalBar")
.attr("x", function (d) { return x(d.Plan) ;})
.attr("y", function (d) { return y(d.TotalTime) ;})
.attr("height", function (d) { return height - y(d.TotalTime) ;})
Similar code for Time1 and Time2 columns
});
我将有一个场景，其中不会有任何标题。第一列和第二列将分别始终是Plan和TotalTime。此外，“时间”列的数量将有所不同。在这种情况下，如何设置轴域？我有以下代码
data.csv
A, 0.08, 0.04, 0.03, 0.01
B, 0.09, 0.02, 0.06, 0.01
index.js
d3.text("data.csv").then(function(data) {
var rows = d3.csvParseRows(data, d3.autoType);
columnCount = rows[0].length;
x.domain(data.map(function(d) { return ??; }));
y.domain([0, d3.max(data, function(d) { return ??; })]);
for (var col=0; col<columnCount; ++Col) {
g.selectAll(.bar)
.data(data)
.enter().append("rect")
.attr("class", "Bar"+col)
.attr("x", function (d) { return x(??); })
.attr("y", function (d) { return y(??); })
.attr("height", function (d) { return height - y(??); })
}
});
您有两种不同的解决方案：
第一个是使用每一列的索引。就您而言，Planis0和totalTimeis 1：
const csv = `A,0.08,0.04,0.03,0.01
B,0.09,0.02,0.06,0.01`;
const data = d3.csvParseRows(csv);
const xDomain = data.map(function(d) {
return d[0];
});
const yDomain = [0, d3.max(data, function(d) {
return d[1];
})];
console.log(xDomain)
console.log(yDomain)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>另一个解决方案是使用行转换功能来更改数据，使其成为对象数组，就像您的第一个片段一样：
const csv = `A,0.08,0.04,0.03,0.01
B,0.09,0.02,0.06,0.01`;
const data = d3.csvParseRows(csv, function(d) {
return {
Plan: d[0],
totalTime: d[1]
}
});
console.log(data)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>然后，您可以使用原始代码。在row函数中，根据需要返回其他列。
最后，作为提示：摆脱该for循环。在D3代码中，避免使用循环附加元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句