相关疑难解决方法(0)

我试图获得text我用d3.js创建的一堆元素的宽度

这就是我创建它们的方式:

var nodesText = svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .text(function(d) {
                return d.name;
           })
          .attr("x", function(d, i) {
                return i * (w / dataset.length);
           })
          .attr("y", function(d) {
                return 45;
          });

然后我使用宽度创建rectangles与text盒子相同的大小

var nodes = svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
            .attr("y", function(d) {
                return 25;
            })
            .attr("width", function(d, i) {
              //To Do: find width of each text element, after it has been generated
              var …

d3.drag的文档指出拖动事件的DOM元素目标可用于this回调：

调度指定事件时，将使用与select相同的上下文和参数调用每个侦听器。在侦听器上：当前数据d和索引i，此上下文作为当前DOM元素。

但是我的回叫是一个对象实例，并this指向该对象。因此，我需要另一种访问通常传入的当前DOM元素的方法this。我该怎么做？

我被困在 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], …