Гистограмма: установить домен оси из CSV без заголовка

Question

У меня есть следующий код для гистограммы d3 из csv с заголовком. Я удалил код, чтобы упомянуть только соответствующие части. Я использую 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
});

У меня будет сценарий, в котором не будет никаких заголовков. 1-й и 2-й столбцы всегда будут 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(??); })
}
});

Answer 1

У вас есть два разных решения:

Первое использует индексы каждого столбца. В вашем случае Plan - это 0, а totalTime - это 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>

Затем вы можете использовать свой оригинальный код. В функции строки верните другие необходимые столбцы.

Наконец, в качестве подсказки: избавьтесь от этого for l oop. В коде D3 избегайте использования циклов для добавления элементов.