D3在SVG中选择元素

Question

我正在尝试使用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")

但是没有运气。有任何想法吗？

- Dan Walmsley

---

如果你想选择id为data的元素，应该选择#Graph svg #data，对吗？ - Phrogz

Answer 1

让我们尝试这段代码。

d3.select("#Graph svg").selectAll("g")

"g" 表示选中 SVG 节点下的所有 "g" 节点。

- lahphim

Answer 2

使用append()创建数据容器时，可以将其保存为变量的选择。

var dataContainer = graph.append("svg:g")
    .attr("id","data");

如果按照这种方式进行操作，您将永远不需要再次进行d3选择（类似于您在问题中的第一行代码中使用var graph所做的方式），因为对此选择的引用已经存储在您的变量dataContainer中。

- ksav