如何通過在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位置，並且永遠不會使調整大小后的干擾遵循鏈接