我有一系列带有系统标签的垂直框。在这些旁边,我需要放置一组两个数字(交易成功和失败)。它看起来应该像这样:

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/

10-11 12:34
查看更多