如何使用 D3.js 使用 scaleTime 构建分组条形图？答案

【问题标题】：How do I build a grouped bar chart with scaleTime, using D3.js?如何使用 D3.js 使用 scaleTime 构建分组条形图？
【发布时间】：2021-04-10 11:18:32
【问题描述】：

我正在尝试使用 D3 制作分组条形图，我只是使用 scaleBand 制作它，但现在我需要使用 scaleTime。这就是我的 scaleBand 代码：

const x0 = scaleBand().range([0, innerWidth]).paddingInner(0.5);

      const x1 = scaleBand().padding(0);

      const y = scaleLinear().range([innerHeight, 0]);

      x0.domain(allGroups);
      x1.domain(subgroups).range([0, x0.bandwidth()]);
      y.domain([0, maxValue]).nice();

      graph
        .append("g")
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("class", "bar")
        .attr("transform", (d) => `translate(${x0(d.key)},0)`)
        .selectAll("rect")
        .data((d) =>
          d.data.map((e) => {
            return { key: d.key, name: e.name, value: e.value };
          })
        )
        .enter()
        .append("rect")
        .attr("x", (d) => x1(d.name))
        .attr("y", (d) => y(d.value))
        .attr("width", x1.bandwidth())
        .attr("height", (d) => innerHeight - y(d.value))
        .attr("fill", (d) => color(d.name))

      graph
        .append("g")
        .attr("transform", `translate(0,${innerHeight})`)
        .call(axisBottom(x0));

      graph.append("g").call(axisLeft(y));

我尝试仅将“x0”更改为 scaleTime，但它与条形重叠并且没有正确定位它们

【问题讨论】：

你为什么要随时间改变它？ Band 是条形图的自然选择，因为域中的每个项目都有宽度。时间没有宽度 - 它们是连续域上的点，时间段（例如天、周、月或年）的持续时间不相等，如果持续时间等于宽度，则可能表示宽度不等的条形。虽然上述适用于基本条形图，但带状图也是一般分组图表的自然选择。
哦，我明白了...谢谢安德鲁，然后我会用 scaleBand 保留它。

标签： javascript d3.js graph charts data-visualization

【解决方案1】：

试试这个例子：

let x = d3
        .scaleTime()
        .domain([(date.setFullYear(d3.min(years).getFullYear() - 1)), (date.setFullYear(d3.max(years).getFullYear()))])
        .range([0, (width - margin.left - margin.right)])

let x1 = d3.scaleBand()
        .domain(keys)
        .rangeRound([0, 147])
        .padding(0.05)

【讨论】：