javascript - 如何在堆积图中使条形的圆角低于较高的条形？

Question

这是我的代码自动取款机：

    const data = [{
      Year: 2017,
      State: "AL",
      "Under 5 Years": 552,
      "5 to 13 Years": 259,
      "14 to 17 Years": 310,
    },
    {
      Year: 2017,
      State: "AK",
      "Under 5 Years": 856,
      "5 to 13 Years": 421,
      "14 to 17 Years": 520,
    },
    {
      Year: 2017,
      State: "AZ",
      "Under 5 Years": 828,
      "5 to 13 Years": 362,
      "14 to 17 Years": 515,
    },
  ];
  const keys: ["Under 5 Years", "5 to 13 Years", "14 to 17 Years"] = [
    "Under 5 Years",
    "5 to 13 Years",
    "14 to 17 Years",
  ];
  var year = [...data.map((d) => d.Year)];
  var states = [...data.map((d) => d.State)];
  var svg = d3
      .select(".stacked-bar-chart")
      .append("svg")
      .attr("width", 650)
      .attr("height", 420),
    margin = { top: 35, left: 35, bottom: 0, right: 15 },
    width = 650 - margin.left - margin.right,
    height = 420 - margin.top - margin.bottom;
  var y = d3
    .scaleBand()
    .range([margin.top, height - margin.bottom])
    .padding(0.1)
    .paddingOuter(0.2)
    .paddingInner(0.2);

  var x = d3.scaleLinear().range([margin.left, width - margin.right]);

  svg
    .append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .attr("class", "y-axis");
  svg
    .append("g")
    .attr("transform", `translate(0,${margin.top})`)
    .attr("class", "x-axis");

  var z = d3
    .scaleOrdinal()
    .range(["steelblue", "darkorange", "lightblue"])
    .domain(keys);
  const newData = data.map((d) => ({
    ...d,
    total: d3.sum(keys, (k) => +d[k as keyof typeof d]),
  }));
  x.domain([0, d3.max(newData, (d) => d.total) as number]).nice();
  y.domain(newData.map((d) => d.State));
  svg
    .selectAll(".x-axis")
    .transition()
    .duration(1000)
    .call(d3.axisTop(x).ticks(null, "s") as any);
  svg
    .selectAll(".y-axis")
    .transition()
    .duration(1000)
    .call(d3.axisLeft(y).tickSizeOuter(0) as any);

  var group = svg.selectAll("g.layer").data(
    d3
      .stack<{
        Year: number;
        State: string;
        "Under 5 Years": number;
        "5 to 13 Years": number;
        "14 to 17 Years": number;
      }>()
      .keys(keys)(newData),
    (d: any) => d.key
  );

  group.exit().remove();

  group
    .enter()
    .insert("g", ".y-axis")
    .append("g")
    .classed("layer", true)
    .attr("fill", (d) => z(d.key) as string);

  var bars = svg
    .selectAll("g.layer")
    .selectAll("rect")
    .data(
      (d: any) => d,
      (e: any) => e.data.State
    );

  bars.exit().remove();

  bars
    .enter()
    .append("rect")
    .attr("height", y.bandwidth())
    .merge(bars as any)
    .transition()
    .duration(1000)
    .attr("y", (d: any) => y(d.data.State) as number)
    .attr("x", (d: any) => x(d[0]))
    .attr("rx", (d: any, index) => {
      console.log("rx d: ", d.data);
      console.log("rx index ", index);
      return 5;
    })
    .attr("ry", (d: any, index) => {
      console.log("rx d: ", d.data);
      console.log("rx index ", index);
      return 5;
    })
    .attr("width", (d: any) => x(d[1]) - x(d[0]));

  var text = svg.selectAll(".text").data(newData, (d: any) => d.State);

  text.exit().remove();
  text
    .enter()
    .append("text")
    .attr("class", "text")
    .attr("text-anchor", "start")
    .merge(text as any)
    .transition()
    .duration(1000)
    .attr(
      "y",
      (d: any) => ((y(d.State) as number) + y.bandwidth() / 2) as number
    )
    .attr("x", (d: any) => {
      console.log("x d", d);
      return x(d.total) + 5;
    })
    .text((d: any) => d.total);

当前结果atm是这样的：

这就是我想要实现的目标：

我知道矩形上的 rx 和 ry 但它有白色背景，我想要它的更大的条作为前一个条的背景？

标签： javascriptd3.js