每个日期绘制多个条形图

Question

我有一个数据数组，每个元素都包含一个日期和一些要显示的信息。我无法绘制条形图。

我尝试了多种解决方案，但目前没有一个有效。

数据是一个包含以下内容的数组。

{ metric1: 10,
  metric2: 20,
  metric3: 30,
  timestamp: a Date object } 

现在我想在 x 轴上以日期为索引绘制彼此相邻的指标。

    const x = d3.scaleTime()
      .rangeRound([0, width]);

    const y = d3.scaleLinear()
      .rangeRound([height, 0]);

    const z = d3.scaleOrdinal(d3.schemeCategory10);

    const xAxis = d3.axisBottom(x)
      .tickFormat(d3.timeFormat('%a %H:%M'));

    const yAxis = d3.axisLeft(y);

这是非常正确的，但现在是棘手的部分。我需要添加域。此外，我有颜色并从数据中提取了正确的键。

x.domain(d3.extent(data, d => d.date));
y.domain(max of metrics);

但是，z 的域对我来说不是很清楚，只有使用 'scaleBand' 我才能使用 bandwidth() 来确保条形图对齐到相应的日期。

我尝试了几个指南和示例。但它们都让我坚持正确构建图表。目前我只能看到正在绘制的轴。

我能做的是例如：

    var legend = svg => {
      const g = svg
          .attr("transform", `translate(${width},0)`)
          .attr("text-anchor", "end")
          .attr("font-family", "sans-serif")
          .attr("font-size", 10)
        .selectAll("g")
        .data(color.domain().slice().reverse())
        .join("g")
          .attr("transform", (d, i) => `translate(0,${i * 20})`);

      g.append("rect")
          .attr("x", -19)
          .attr("width", 19)
          .attr("height", 19)
          .attr("fill", color);

      g.append("text")
          .attr("x", -24)
          .attr("y", 9.5)
          .attr("dy", "0.35em")
          .text(d => d);
    }

以上方法可以完美地绘制具有正确键和颜色的图例。然而，这些栏没有显示出来。

有人可以指点我一个好的指南吗？

Answer 1

基本上你不能在分组时使用 scaleTime 作为 x 轴。解决方案是使用类似：d3.Timeformat 将日期解析为字符串（间隔需要相似才能使可视化有意义）