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

Question

我正在尝试使用 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 但它与条重叠并且没有正确定位它们

标签： javascriptd3.jsgraphchartsdata-visualization

Answer 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)