我正在使用d3plus绘制线图,并且添加了三个注释,这些注释是<rect>
明显包含 '' 元素的形状。该库将它们放置在<g>
作为兄弟姐妹的单独元素中:
<g class="d3plus-rect-group">
<g class="d3plus-rect-shape">
<rect class="d3plus->...</rect>
</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>
值放置文本框之类的事情,但那里总是有一些空间。有没有办法缩小矩形,使文本框周围没有空间?