d3：根据之前元素的长度定位文本元素

Question

我被困在 d3（或一般的 JavaScript）。

我想用 d3 创造一个传奇。9个项目的位置应该是相互依赖的。进一步来说：

这是我的简化数组： var dataset = ["Africa","Asia", "Caribbean", "Central America", "Europe", "Middle East", "North America", "Oceania", "South America"] ;

在 x 轴上，我想绘制下一个文本 40px 进一步（向右）然后最后一个文本标签结束。我的目的是每次在圆圈之间都有相同的空间。因此，下一个文本始终取决于最后一个国家/地区名称的长度。

我试过这个：

.attr("x", function(d, i) {return i * 40 + d[i-1].length + 7;})

但控制台说 d[i-1] 未定义。

我错过了什么？你会如何解决这个问题？

提前谢谢了！非常感激你的帮助！

伊娃

更新：实际上，我想绘制的图例不仅包含文本，还包含小圆圈。

这是数组（硬编码 x_pos 为 d[2]： var dataset = [ ["Africa", "#4B7985", 5], ["Asia", "#58AB86", 55], ["Caribbean", "#63A4B5", 100], ["中美洲", "#818181", 165], ["欧洲", "#E9726C", 255], ["中东", "#E3AC73", 310], [ "北美洲", "#B65856", 383], ["大洋洲", "#287E5C", 470], ["南美洲", "#AC8358", 530]];

如何根据国家/地区名称的长度绘制圆圈并在圆圈之间获得相同的间距？

Answer 1

您可以绘制文本元素以在画布上获取边界框。然后根据最后一个元素的宽度调整位置：

svg.selectAll("text")
  .data(data).enter()
  .append("text")
  .attr("x", function(d) {
    return x_pos;
  })
  .attr("y", 50)
  .style("display", "none")
  .text(function(d) { return d; });

svg.selectAll("text")
  .style("display", "block")
  .attr("x", function(d) {
    var c_pos = x_pos;
    x_pos = x_pos + this.getBBox().width + distance;
    return c_pos;
  });

完整示例：https : //vida.io/documents/C5CSjbWLhoJ8rQmhF