如何在d3中选择div内的svg?

时间:2018-03-12 22:11:05

标签: javascript d3.js svg

我在div中附加了一个SVG。以下是此代码:

var metricDiv = d3.select("#metric4");
var metricSVG = metricDiv.append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "metricmap")
    .call(zoom)
    .append("g");
//create a place holder rectangle to keep floats inline
var svgContainer = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", width)
    .attr("id", "placeholder");
d3.json("img/defense_data.json", function (error, map) {
    if (error) return console.error(error);
    var projection = d3.geo.mercator()
        .center([7.612337603149424, 51.96211781909236])
        .scale(3000000);
    //.translate(0,0);
    var path = d3.geo.path()
        .projection(projection);
    metricSVG.selectAll(".city_block_landmarks")
        .data(topojson.feature(map, map.objects.city_block_landmarks).features)
        .enter().append("path")
        .attr("class", function (d) {
            //console.log(d.properties.class)
            return d.properties.classfeature;
        })
        .attr("id", function (d) {
            //console.log(d.id)
            return d.id;
        })
        .attr("d", path);
    metricSVG.selectAll(".hidden_landmarks")
        .data(topojson.feature(map, map.objects.hidden_landmarks).features)
        .enter().append("path")
        .attr("class", function (d) {
            //console.log(d.properties.class)
            return d.properties.classfeature;
        })
        .attr("id", function (d) {
            //console.log(d.id)
            return d.id;
        })
        .attr("d", path);
    metricSVG.selectAll(".botanica_mid_polygons")
        .data(topojson.feature(map, map.objects.botanica_mid_polygons).features)
        .enter().append("path")
        .attr("class", function (d) {
            //console.log(d.properties.class)
            return d.properties.classfeature;
        })
        .attr("id", function (d) {
            //console.log(d.id)
            return d.id;
        })
        .attr("d", path);
    metricSVG.selectAll(".streets_linear_features")
        .data(topojson.feature(map, map.objects.streets_linear_features).features)
        .enter().append("path")
        .attr("class", function (d) {
            //console.log(d.properties.class)
            return d.properties.classfeature;
        })
        .attr("id", function (d) {
            //console.log(d.id)
            return d.id;
        })
        .attr("d", path);
});

现在,我想选择div #metric4内附加的所有内容,而不是div本身。我知道我们通常使用d3.select()函数执行此操作,但我无法弄清楚在选择函数的括号内写入什么来选择附加到div的所有内容。任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

如果要选择元素内的所有内容,可以使用*作为选择器。

d3.select("#metric4").selectAll("*")

这将从该div中选择所有内容,您可以继续使用d3方法链进行所需的选择。