d3.js - 如何用变量名选择svg元素

  显示原文与译文双语对照的内容

如何创建 SVG,追加文本,然后在SVG下追加一个将承载一些圆的G? 我正在创建几个构造,所以只引用. select('svg') 并不像所有G 元素堆叠到targetDIV中的第一个 SVG 。 谢谢- Corbin Supak !


//done in a loop several times...
svg = d3.select(targetDIV)
. append('svg')
. attr('id', targetSVG)
. attr('height', svgHeight)
. append('text')
. attr("transform","translate(0,"+markSize+")")
. text(status)
. style("font-size",markSize+"px")
 ;
 g = d3.select(targetSVG)
. append('g')
. attr("transform","translate("+markSize/2+","+markSize/2+")");
 ;
 g.selectAll("circle")
. data(statusAlerts)
. enter()
. append("circle")
. attr("cx", function(d,i) {
 return (i*markSize) + markSize/2 + 50;//50 is to give room for text label
 })
. attr("cy", 0)
. attr("r", markSize/2)
. attr("fill", alertColor)
 ;

时间: 作者:

一个最小的骨架。


var svg = d3.select("body").append("svg")
...;

var g = svg.select("g").append("g")
...;

svg.append("text")
...;

g.append("circle")
...;

...