如何通过在svg元素上调整大小来使文本的位置动态化？

Question

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

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

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'
    }); 

Answer 1

与其直接使用父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'
                });

这可行！

Answer 2

您可以设置文本的x和y位置，并且永远不会使调整大小后的干扰遵循链接