在添加新元素后保持元素的分层

Question

我正在绘制一个可点击的图形数据浏览器。

实施例： 首先，我加载了几部电影，我看到了这个：

然后，在我点击其中一个节点（ Hellraiser ，在本例中）之后，我使用ajax加载其他相关信息属性和值，最后得到：

新添加的节点的线条和圆圈显然是在最初点击的节点之后绘制的。

以下是每次准备好将新数据添加到图表时调用的draw方法：

function draw() {

    force.start();

    //Create edges as lines
    var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 2)
            .on("mouseover", lineMouseover)
            .on("mouseout", lineMouseout);

    //create the nodes
    var node = svg.selectAll(".node")
            .data(dataset.nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .on("click", callback)
            .attr("r", function(d, i) { //custom sizes based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].size;
                } else {
                    return _design["other"].size;
                }
            })
            .call(force.drag);

    //create fancy outlines on the nodes
    node.append("circle")
            .attr("r", function(d,i) { //custom sizes based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].size * r;
                } else {
                    return _design["other"].size * r;
                }
            })
            .style("stroke", "black")
            .style("stroke-width", 3)
            .style("fill", function(d, i) { //custom color based on datatype
                if(d.datatype && (d.datatype in _design) ) {
                    return _design[d.datatype].color;
                } else {
                    return _design["other"].color;
                }
            })
            .attr("class","circle");

    //Add text to each node.
    node.append("text")
            .attr("dx", 0)
            .attr("dy", ".25em")
            //.attr("class", "outline")
            .attr("fill", "black")
            .text(function(d, i) {
                return d.name;//d.name
            });

};

如何在点击的节点下绘制这些线？

Answer 1

您可以将g元素下面的不同类型的元素分组，这些元素可以按照所需顺序在开头创建。这样，以后添加到它们的任何内容都将被正确排序：

var links = svg.append("g"),
    nodes = svg.append("g"),
    labels = svg.append("g");

// ...

var edges = links.selectAll("line")
        .data(dataset.edges)
        .enter()
        .append("line");

var node = nodes.selectAll(".node")
        .data(dataset.nodes)
        .enter()
        .append("g")

// etc.