d3- js: масштабировать время по se c, мин, час, день, месяц и год

Question

как я могу создать шкалу времени по секундам, минутам, часам, дням, месяцам и годам. в моем коде я получаю вторую строку, когда секунды перекрываются.

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
  width = 600 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

// define the 0 line
var valueline0 = d3.line()
  .x(function(d) { return x(d.date); })
  .y(function(d) { return y(d.value0); });

// append the svg object to the id="chart" of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#chart").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom + 75 )
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("/trace/O00.csv", function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value0 = +d.value0;
  });

  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) {
    return Math.max(d.value0); })]);

  // Add the valueline0 path.
  svg.append("path")
    .data([data])
    .attr("class", "line")
    .style("stroke", "steelblue")
    .attr("d", valueline0);

  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%Y-%m-%d %H:%M:%S")))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(y));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

O00.csv:

date,value0         
2020-07-14T14:03:51,35.66
2020-07-14T14:04:01,23.56
2020-07-14T14:03:11,32.64
2020-07-14T14:03:21,22.55
2020-07-14T14:03:31,28.60
2020-07-14T14:03:41,38.70
2020-07-14T14:03:51,35.66
2020-07-14T14:04:01,23.56
2020-07-14T14:04:11,21.54

диаграмма с 2 строками

вторая строка начинается с 7-й записи данных (2020-07-14T14: 03: 51,35.66), потому что секунды ( 51) из 1-й записи данных (2020-07-14T14: 03: 51,35.66) повторяются. Заранее спасибо, Онка

Answer 1

проблема возникла из-за непоследовательных записей в файле csv. при правильной последовательности все работает как надо! сделано! спасибо за все ...

Answer 2

Есть «всего одна строка». У вас есть даты с несколькими значениями. Если вам не нужно одно из значений, вам нужно удалить это значение из набора данных, отфильтровав данные каким-либо образом.

Если вы хотите удалить лишнюю точку данных, вам нужно будет вычислить какой из них является правильным значением. Например, если мы скажем: «Давайте использовать максимальное значение», преобразуйте этот код:

  // format the data
  data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value0 = +d.value0;
  });

в эту

// format the data
data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value0 = +d.value0;
});

const dataMap = {};
let dupCount = 0;;
data.forEach((d, index) => {
    if (!dataMap[d.date]) {
        dataMap[d.date] = true;
    } else {
        // remove the duplicate from the CSV
        data.splice(index - dupCount, 1);
        dupCount++;
    }
});

Альтернативу, и гораздо проще, будет сначала отфильтровать данные из CSV с использованием синтаксического анализатора csv: https://www.npmjs.com/package/csv-parser, а затем передача их в функцию .data(filteredCsvData) вместо использования встроенной d3.csv(), которая не содержит того, что вам нужно.