Question

我有一系列带有系统标签的垂直方框。接下来我需要放置一组两个数字（交易成功和失败）。看起来应该是这样的：

System A    (1000, 121)
System B    (323, 142)
System C    (600, 42)
System D    (1337, 66)

我的问题是：我很难弄清楚如何排列括号和逗号的数字。我可以得到＆＃34;系统＆＃34;的宽度。使用.getComputedTextWidth（）的字符串，并从中抵消事务编号很简单。数字的范围可以是1到5位数（在高端，数字从199,200到199.2k截断）。

如何使括号和逗号移动以匹配数字的长度？这些数字不断变化，我只能硬编码。我使用D3，因此框和文本都是SVG格式。为了更容易，我可以将所有左括号与系统名称的静态偏移对齐。

添加了诡计：交易号不能只是一个字符串 - ＆＃34;成功＆＃34; （第一个数字）必须是绿色和＆＃34;失败＆＃34; （第二个数字）必须为红色。据我所知，没有办法有选择地为字符串着色。

如果我不清楚，或者您需要查看图片或示例，请告诉我。

谢谢！

Answer 1

您可以在文本中使用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.

文本对齐长度未知

1 个答案: