1

这是一个很难解释的问题，但希望它是一个容易回答的问题……请耐心等待……我认为 js 是在摆弄它，但我必须重写很多代码，因为它使用的数据来自我的内部服务器。

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

我相信问题是由于我绘制 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);

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

你可以看到我定义了 'link' 和 'node' - 就像所有的例子一样 - 但是我发现如果我使用 node.selectAll(".realnode").append...如果我使用 vis.selectAll(".realnode").append... 效果很好，所以我只是这样做并继续前进

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

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

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

谢谢

- 克里斯

4

1 回答 1

0

如果我正确理解代码和描述，则 nodeArray 有一些带有 class 的项目node和其他带有 class的项目realnode。创建节点时，您仅选择 class 的节点node，这允许创建每个 class 的组，但仅将选择限制为 class 的组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;
}
于 2013-05-12T20:12:05.000 回答