我有一系列带有系统标签的垂直框。在这些旁边,我需要放置一组两个数字(交易成功和失败)。它看起来应该像这样:
System A (1000, 121)
System B (323, 142)
System C (600, 42)
System D (1337, 66)
我的问题是这样的:我很难弄清楚如何在数字的括号和逗号之间对齐。我可以使用.getComputedTextWidth()获取“系统”字符串的宽度,并从中偏移交易编号很简单。数字范围可以从1到5位数字(在高端,数字从199,200到199.2k被截断)。
如何使括号和逗号移动以匹配数字的长度?这些数字一直在变化,我不能仅仅对其进行硬编码。我使用的是D3,因此方框和文本均为SVG格式。为了简化起见,我可以将所有的开括号都与系统名称的静态偏移量对齐。
更加棘手的是:事务编号不能只是一个字符串-“成功”(第一个编号)必须为绿色,而“失败”(第二个编号)必须为红色。据我所知,还没有一种方法可以选择性地为字符串着色。
如果我不清楚,或者您需要查看图片或示例,请告诉我。
谢谢!
最佳答案
您可以在文本中使用tspan
元素为不同的单词赋予不同的颜色,并使它们保持一致,而不是手动排列一堆不同的text
元素。
MDN tspan page.
您的dom看起来像这样:
<svg>
<text xml:space="default" x="30" y="15">
<tspan class="system">System</tspan>
<tspan>A (<tspan>
<tspan class="success">1000</tspan>
<tspan>,<tspan>
<tspan class="failures"> 121</tspan>
<tspan> )<tspan>
</text>
</svg>
此CSS将为文本着色:
.system{ fill: blue; }
.success{ fill: green; }
.failures{ fill: red; }
您可以在d3中一次将
tspan
附加到文本中,如下所示:var myText = d3.select('svg').append('text')
.attr("x", 90)
.attr("y", -257)
myText.append('tspan')
.text('System')
.classed('system', true);
myText.append('tspan')
.text('A (');
//etc.
关于javascript - 长度未知的文本对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25313695/