D3-迁移多列图表从V3到V7

Question

我在D3 V3中有多列图，必须将此代码移植到新的D3 V7。在生成的旧版本列中，在新的i有列组中，但没有组为组。我做错了什么？

// serries
        let series = this.seriesContainer.selectAll('.series')
            .data(this.data.series);

        series.enter()
            .append('g')
            .classed('series', true)
            .attr('fill', (s, i) => colorTable[i])
            .attr('transform', (s, i) => this.createTranslateProperty((i * (categoryScale.bandwidth() / this.data.series.length))));
        series.exit().remove();

// columns
        let dataSelector = (s: ColumnChartDataSeriesModelI) => s.values

        let columns = series.selectAll('.columnChartColumn').data(dataSelector);
        columns.enter()
            .append('rect')
            .classed('columnChartColumn', true);

        columns.attr("rx", 5)
            .attr("font-size", 10)
            .attr('width', (categoryScale.bandwidth() / this.data.series.length) - 2)
            .attr('height', 10)
            .attr('y', 10)
            .attr('x', (v, i) => categoryScale(this.data.categories[i]));

        columns.exit().remove();

// data model
export interface ColumnChartDataSeriesModelI {
    values: Array<number>
};

实际上，在V7中，

...
<g class="columnChartSeriesContainer">
  <g class="series" fill="#0084F5" transform="translate(0,0)"></g>
  <g class="series" fill="#FA8F32" transform="translate(23,0)"></g>
</g>
...

当旧V3生成HTML

<g class="columnChartSeriesContainer">
   <g class="series" fill="#0084F5" transform="translate(0,0)">
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="270" y="0" x="1"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="210" y="60" x="63"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="150" y="120" x="125"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="150" y="120" x="187"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="240" y="30.000000000000014" x="249"></rect>
   </g>
   <g class="series" fill="#FA8F32" transform="translate(25,0)">
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="60" y="210" x="1"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="180" y="90.00000000000001" x="63"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="89.99999999999997" y="180.00000000000003" x="125"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="30" y="240" x="187"></rect>
      <rect class="columnChartColumn" rx="5" font-size="10" width="23" height="60" y="210" x="249"></rect>
   </g>
</g>

编辑时，我得到了HTML - 解决方案：

明显地将返回的对象返回到变量 serries 和列不合适当我这样分配时，

let series = this.seriesContainer.selectAll('.series').data(this.data.series);

我解决了这样的写作

        let series = this.seriesContainer.selectAll('.series').data(this.data.series)
            .enter()
            .append('g')
            .classed('series', true);

        series.attr('fill', (s, i) => colorTable[i])
            .attr('transform', (s, i) => this.createTranslateProperty((i * (categoryScale.bandwidth() / this.data.series.length))));
            
        series.exit().remove();

        let columns = series.selectAll('.columnChartColumn').data(dataSelector).enter()
            .append('rect')
            .classed('columnChartColumn', true);

        columns.attr("rx", 5)
            .attr('width', (categoryScale.bandwidth() / this.data.series.length) - 2)
            .attr('height', v => columnMaxSize - columnScale(v))
            .attr('y', v => columnScale(v))
            .attr('x', (v, i) => categoryScale(this.data.categories[i]));

        columns.exit().remove();