Question

这是一个难以解释的但希望它很容易回答...忍受我...我认为js摆弄它但我必须重写很多代码，因为它使用的数据是来自我的内部服务器。

我已经编写了大量的j来模拟网络地图并且它的时间太长了，问题的实质是我可以用初始数据绘制地图，但是当我更新它时它有时会破坏 - 即当我从原始地图中删除节点（虽然我可以添加新节点）

我认为问题是由于我绘制svg对象的方式。

我正试着在飞行中稍微练习d3，所以我可能无意中偏离了正确的方向。

首先我定义vis（window.vis，因为它现在是我可以用控制台测试它） - 我认为一些例子使用变量svg。

  window.vis = d3.select("body")
    .append("svg:svg")
    .attr("pointer-events", "all")
    .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append('svg:g');

然后我做了一些其他的事情，创建nodeArray（我想要的节点数组）和linkArray（我想要的链接数组）然后我绘制节点和链接：

link = vis.selectAll("line").data(linkArray);
        link.enter().append("line")
        .attr("stroke-opacity", function (d, i) {
            if (d.class == 'link reallink') {
                return '0.8';
            } else {
                return '0';
            };
        })
        .attr("stroke-width", function (d, i) {
            if (d.class == 'link reallink') {
                return '3';
            } else {
                return '0';
            };
        })
        .style("stroke", function (d, i) { return d.color; });



        node = vis.selectAll("g.node").data(nodeArray);
        node.enter().append("svg:g")
        .attr("class", function (d) { return d.class })
        .attr("id", function (d) { return d.id })
        .call(force.drag);


        //append to each node an svg circle element
        vis.selectAll(".realnode").append("svg:circle")
        .attr("r", function (d, i) { 
            if (d.status != "0") { 
                return r*2; 
            } else { 
                if (d.iconimage == "") { return r; } else { return 1; } 
            }
        })
        .style("fill", function (d, i) { if (d.status != "0") { if (d.status == "1") { return "#ff0000"; } else { return "#FFBF00"; } } else { return "#FFFFFF"; }})
        .style("stroke", function (d) {
            if (d.style !== 'filled') { return d.color; };
        })
        .style("stroke-width", "4");


        //attach images to the nodes
        vis.selectAll(".realnode").append("image")
        .attr("xlink:href", function (d) { return d.iconimage; })
        .attr("x", -16)
        .attr("y", -16)
        .attr("width", 32)
        .attr("height", 32);

NB：我使用的节点类是节点（所有节点）和realnode（真实对象）（因为我之后也将文本标签建模为不同的类标签节点）。 nodeArray只是一个格式化为节点的对象数组，linkArray只是一个链接数组。

你可以看到我定义了'link'和'node' - 就像所有的例子一样 - 但是如果我使用node.selectAll（“。realnode”），我发现圆圈和图像没有正确附加。附加。 ..但如果我使用vis.selectAll（“。realnode”），那就可以正常工作。附加...所以我就这样做了，继续前进

但是我认为我需要解决这种缺乏理解的问题！

稍后，当我从nodeArray中删除节点并从linkArray中删除链接，并更新显示时，我再次使用“节点”和“链接”对象与“vis”混合使用 - 并且此时全部出错了，腐败了。虽然页面上的svg元素仍然定义了正确的对象，但图像交换，文本交换以及链接在没有节点的情况下自行浮动！我检查了nodeArray和linkArray，它们是完全正确的，如果我在更新后使用“新”数据作为原始数据，当我第一次加载页面时它渲染得很好，所以我对我的数据对象很有信心。

我认为最好的方法是让我回答任何问题，并在我继续进行更新时，因为我希望有人会看到这个，看看我做错了什么。真正讨厌的事情是初始页面加载总是完美无缺，但是数据的更新比我从头开始的整个初始页面绘制代码要长！

由于

- 克里斯

Answer 1

如果我理解代码和描述正确，nodeArray有一些项目为node，其他项目为realnode。创建节点时，您只选择类node的节点，这允许创建每个类的组，但仅将选择范围限制为类node的组。我认为你需要用两个类创建节点

nodes = vis.selectAll('g')
   .data(nodeArray)
   ...
   .call(force.drag);

然后对基于元素类的选择进行操作：

nodes.selectAll('g.realnode')
   // ... set attributes here

另外，我建议使用css来设置链接和节点类的属性：

links = vis.selectAll('line')
    .classed('real-link', function(d) { return d.class == 'link reallink'; });

并在css中：

svg .real-link {
    stroke-opacity: 0.8;
    stroke-width: 3;
}

D3：node = vis.selectAll（“。node”）的问题

1 个答案: