svg - 删除 svg 中 rect 内文本元素周围的空间

Question

我正在使用d3plus绘制线图，并且添加了三个注释，这些注释是<rect>明显包含 '' 元素的形状。该库将它们放置在<g>作为兄弟姐妹的单独元素中：

<g class="d3plus-rect-group">
  <g class="d3plus-rect-shape">
    <rect class="d3plus->...</rect>   ​
 ​&lt;/g>
  <g class="d3plus-rect-text">
    <g class="d3plus-text-box">
      <text>
    </g>  
  </g> 
<g>

使用此代码：

return new LinePlot()
                          annotations: [
                            { Line annotation data goes here },
                            {
                                shape: "Rect",
                                data: this.annotationRects,
                                opacity: this.annotationOpacity,
                                fill: '#fff',
                                rx: '.25rem',
                                ry: '.25rem',
                                label: function (d) {
                                    let result = d.label;
                                    let list = window.matchMedia('(max-width: 576px)');
                                    if (list.matches) {
                                        result = ''
                                    }

                                    return result;
                                },
                                labelConfig: {
                                    textAnchor: function(d, i) {
                                        return d.labelTextAnchor;
                                    },
                                    verticalAlign: function(d, i) {
                                        return d.labelVerticalAlign;
                                    },
                                    fontColor: function (d) {
                                        let result = d.color;
                                        let list = window.matchMedia('(max-width: 576px)');
                                        if (list.matches) {
                                            result = ''
                                        }

                                        return result;
                                    },
                                },
                            },
                        ]
}

           annotationLines() {
                let items = [
                    // Draws vertical startDate date line
                    {
                        id: 'startDate',
                        x: this.startDate,
                        y: 0
                    },
                    {
                        id: 'startDate',
                        x: this.startDate,
                        y: this.ceilingValue * 1.11
                    },

                    // Draws vertical endDate date line
                    {
                        id: 'endDate',
                        x: this.endDate,
                        y: 0
                    },
                    {
                        id: 'endDate',
                        x: this.endDate,
                        y: this.ceilingValue * 1.11
                    },
                ];
                if (!this.isGrant) {
                    items.push(
                        {
                            id: "ceilingValue",
                            x: this.bufferedStartDate,
                            y: this.ceilingValue
                        },
                        {
                            id: "ceilingValue",
                            x: this.bufferedEndDate,
                            y: this.ceilingValue
                        }
                    );
                }

                return items;
            },

            annotationRects() {
                const items = [
                    {
                        id: 'startDate',
                        x: this.startDate,
                        y: this.ceilingValue * 1.11,
                        width: 90,
                        height: 25,
                        color: "#g",
                        label: 'Award Date',
                        labelTextAnchor: 'middle',
                        labelVerticalAlign: 'end'
                    },
                    {
                        id: 'endDate',
                        x: this.endDate,
                        y: this.ceilingValue * 1.11,
                        width: 150,
                        height: 25,
                        color: "#265d94",
                        label: 'Ultimate Completion Date',
                        labelTextAnchor: 'middle',
                        labelVerticalAlign: 'end'
                    }
                ];

                if (!this.isGrant) {
                    items.push(
                        {
                            id: 'ceilingValue',
                            x: this.ceilingAnnotationDate,
                            y: this.ceilingValue,
                            width: 85,
                            height: 30,
                            color: "#33867e",
                            label: 'Ceiling Value',
                            labelTextAnchor: 'start',
                            labelVerticalAlign: 'middle'
                        }
                    );
                }

                return items;
            },

<rect>问题是形状 内的文本标签周围有很多空间，如下所示：

我想要做的是紧贴<text>内容边缘周围的矩形（因为没有更好的术语）。它不像填充那么简单，我一直在搞乱诸如封闭<rect>和元素的大小以及使用textAnchor和verticalAlign<text>值放置文本框之类的事情，但那里总是有一些空间。有没有办法缩小矩形，使文本框周围没有空间？

标签： svgd3.jstextboxannotationsd3plus