Javascript 如何在svg元素上动态调整文本的位置？

我正在创建一种条形图，并尝试包含数据标签。我已经绘制了包含适当值的文本，但它对调整大小的响应不好。它不会随着工具栏移动，而是保持静止，直到页面刷新

请注意，数字应位于绿色和红色条的正上方：

this.svg.selectAll("text.dataLabels")        
    .data(viewModel.dataPoints)
    .enter()
    .append("text")
    .attr("class","dataLabels")
    .attr({
        y: (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value)-BarChart.Config.dataLabelShift.vertical,
        x: (dataPoint: BarChartDataPoint) => xScale(dataPoint.category)+BarChart.Config.dataLabelShift.horizontal
    })
    .attr("text-anchor", "middle")
    .text((dataPoint: BarChartDataPoint) => <string>dataPoint.value)
    .style({
        'font-family': 'sans-serif',
        'font-weight':'bold',
        'fill': 'grey'
    }); 

---

您可以设置文本的x和y位置，它不会在调整大小时造成干扰，而不是直接使用父svg对象并直接在其上附加文本元素，而是创建一个单独的元素：

 private dataLabels: d3.Selection<SVGElement>;
    this.dataLabels = this.svg
            .append('g')
            .classed('dataLabels',true)

然后，我将文本元素附加到一个新对象：

let dataLabelEl = this.dataLabels
                .selectAll('text.dataLabels')
                .data(viewModel.dataPoints);

            dataLabelEl
                .enter()
                .append('text')
                .classed('dataLabels', true);

            dataLabelEl
                .attr({
                    y: (dataPoint) => yScale(<number>dataPoint.value)-BarChart.Config.dataLabelShift.vertical,
                    x: (dataPoint) => xScale(dataPoint.category)+BarChart.Config.dataLabelShift.horizontal
                })
                .attr("text-anchor", "middle")
                .text((dataPoint) => <string>dataPoint.value)
                .style({
                    'font-family': 'sans-serif',
                    'font-weight':'bold',
                    'fill': 'grey'
                });

---

这管用

你必须看看为什么你的文本的x坐标没有很好地与条对齐。右边的间隙越大，这是我调整绘图大小后的结果，在调整窗口大小之前，它们会很好地对齐。然后，您还没有正确更新xScale以使用新的SVG大小。您需要重新阅读“输入-修改-退出”范式连接，并思考您在更新中所做的操作。如果调整大小后为真，则我也会对条的位置产生问题。这仅在添加了另一个地方的文字，你能澄清一下吗？我没有在任何地方添加文本elsedataLabelEl不包含新的文本元素，您使用的是哪个版本的d3？我指的是d3v4/v5 APIOh，我看到了，我正在使用v3，因为其他依赖性在新版本中不能很好地工作。