[英]create position / and add text in circle using D3 using “g” and svg in JavaScript /or Coffee
所以我試圖分離每個小柱看起來像這樣
![enter image description here][1]
這里
但是里面有文字,但是我無法弄清楚當我使用下面的這段代碼時,圓圈不會散開
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
我的結果顯示我所有的圓圈都在左上角
有什么建議嗎?
謝謝
問題是您試圖在數字而不是對象上設置屬性( dx
和dy
)。 這不起作用,您的翻譯未定義。 改用單獨的變量,例如
dx = i * 70 + 50
dy = svg_h / 2
"translate(" + dx + "," + dy + ")"
該文本未顯示,因為您引用的屬性.name
不存在。 此外,黑色圓圈上的黑色文字也不可見。 您可以通過為文本提供不同的顏色並將數字附加為文本來輕松解決此問題:
nodes.append("text").attr("text-anchor", "middle").text (d) ->d
這里完整的例子。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.