我正在尝试在D3中创建一些图形。到目前为止,还是很喜欢它,但是我有点卡住了。我想创建一个区域来保存数据点,而另一个区域来保存轴和标签。我想我会比这更细粒度,以使更新图更有效。但是我遇到的问题是我似乎无法在SVG中选择子元素。
这是我所拥有的:
var graph = d3.select('#Graph svg')
if (graph[0][0] == null){
graph = d3.select('#Graph')
.append("svg:svg")
.attr("width",width)
.attr("height",height)
.attr("class","chart");
}
graph.append("svg:g")
.attr("id","data")
现在我还没有找到选择该数据容器的方法。我已经尝试过
d3.select("#Graph svg data")
但是没有运气。有任何想法吗?
让我们尝试一下此代码。
d3.select("#Graph svg").selectAll("g")
“ g”表示选择svg节点下的所有节点“ g”。
使用append()
创建数据容器时,可以将其作为选择保存到变量中。
var dataContainer = graph.append("svg:g")
.attr("id","data");
如果以这种方式完成,您甚至不需要再次进行d3选择(以类似的方式,在问题代码的第一行使用var graph
完成),因为对该选择的引用已经存储在您的var dataContainer
中。