使用D3创建位置/并在圆圈中添加文字；g"；以及JavaScript/或咖啡中的svg

所以我试着把每个圆环分开，让它们看起来像这样

![enter image description here][1]

这里

但是里面有文本，但我无法理解我的圈是如何在我使用下面的coffescript代码时不展开的

svg_w = 800
svg_h = 400
svg = d3.select("body").append("svg").attr("width", svg_w).attr("weight", svg_h)

list = [1,2,3,4,5]
dataset = (x*10 for x in list)
console.log dataset


nodes = svg.append("g").attr("class", "nodes").selectAll("circle")
        .data(dataset).enter().append("g")
            .attr("transform", (d, i) ->

                  d.x = i * 70 + 50
                  d.y = svg_h / 2

                  "translate(" + d.x + "," + d.y + ")"

                )

nodes.append("circle").attr("class", "node").attr "r", 20
nodes.append("text").attr("text-anchor", "middle").text (d) ->d.name

我的结果显示我所有的圆都在左上角

有什么建议吗

---

谢谢

问题是您试图在数字上而不是对象上设置属性（

d.x

和

d.y

）。这不起作用，您的翻译未定义。使用单独的变量，例如

 dx = i * 70 + 50
 dy = svg_h / 2
 "translate(" + dx + "," + dy + ")"

文本不会显示，因为您正在引用不存在的属性

.name

。此外，黑色圆圈上的黑色文本不可见。您可以通过为文本指定不同的颜色并添加数字作为文本来轻松解决此问题：

nodes.append("text").attr("text-anchor", "middle").text (d) ->d

---

完整的示例。

权重属性应该是“高度”，但除此之外，它看起来应该可以工作。非常感谢，这现在是有意义的。我得到的最好答案！！非常清楚：-）！！我想弄明白为什么文本不会出现在我的圆圈中间。从这一行nodes.append（“text”）.attr（“text anchor”，“middle”）.text（d）->d.name认为我已经做了我应该做的一切。抱歉，我错过了那部分--仍然时差。将更新答案。