添加新元素后保持元素的分层答案

【问题标题】：maintaining the layering of elements after adding new elements添加新元素后保持元素的分层
【发布时间】：2014-02-10 19:39:01
【问题描述】：

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

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

然后，在我点击其中一个节点（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
            });

};

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

【问题讨论】：

我会为不同类型的元素添加单独的g 元素，即一个用于节点，一个用于文本，一个用于行。如果你正确地对它们进行分层，那么附加到它们的所有东西也会是。
感谢您的回复。总的来说，这个想法是个好主意。我有点不清楚那些额外的g 将被添加到哪里。我将.append(g) 添加到我的代码的circle 和text 部分的链中，结果它们没有呈现。你能提供更多细节吗？
你在一开始就这样做，例如lines = svg.append("g")，然后是 lines.selectAll("line")，而不是 svg.selectAll("line")。节点和组类似。
谢谢。有效。你介意回答这个问题以便我接受吗？

标签： javascript graph d3.js

【解决方案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.

【讨论】：