Question

所以基本上我有一个力导向图，其中节点是voronoi布局的中心点。

只要拖动任何节点，它就会更新tick函数中的voronoi。显然这在计算上相当昂贵，所以我想知道是否有人对优化代码有任何意见，以切断任何不必要的代码。

具体来说，我正在考虑这些代码段。

force.on("tick", function() {
            link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });

            if(settled === 1) {
                preset = "[";
                gens = "["
                node.attr("cx", function(d) {
                    preset = preset + "[" + d.x + "," + d.y + "],";
                    gens = gens + d.g + ",";
                    return d.x;
                });
                preset = preset.substring(0, preset.length - 1) + "]";
                gens = gens.substring(0, gens.length - 1) + "]";

                path = path.data(d3.geom.voronoi(eval(preset)), polygon);

                path.exit().remove();

                path.enter().append("path")
                    .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
                    .attr("d", polygon)
                    .style("fill",function(d,i){
                        var point = d.point;
                        var gens;
                        node.attr("cx", function(d) {
                            if(d.x === point[0] && d.y === point[1]) gens = d.g;
                            return d.x; }
                        );
                        return gens >= 0 ? colsa[gens] :  "none";
                    })
                    .style("fill-opacity",0.75);

                path.order();
            }
        });

        force.on("end", function() {
            if(settled === 0) {
                preset = "[";
                gens = "["
                node.attr("cx", function(d) {
                    preset = preset + "[" + d.x + "," + d.y + "],";
                    gens = gens + d.g + ",";
                    return d.x;
                });
                preset = preset.substring(0, preset.length - 1) + "]";
                gens = gens.substring(0, gens.length - 1) + "]";

                path = svg.select("#voro").selectAll("path")
                    .data(d3.geom.voronoi(eval(preset)))
                    .enter().append("svg:path")
                    .attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
                    .attr("d", polygon)
                    .style("fill",function(d,i){
                        var point = d.point;
                        var gens;
                        node.attr("cx", function(d) {
                            if(d.x === point[0] && d.y === point[1]) gens = d.g;
                            return d.x; }
                        );
                        return gens >= 0 ? colsa[gens] :  "none";
                    })
                    .style("fill-opacity",0.75);
                settled = settled + 1;
            }
        });

我现在重新认识到它现在以一种非常强硬的方式实施，这就是为什么我希望可能有更好的东西。具体在这里：

node.attr("cx", function(d) {
                    preset = preset + "[" + d.x + "," + d.y + "],";
                    gens = gens + d.g + ",";
                    return d.x;
                });

在这里：

node.attr("cx", function(d) {
                            if(d.x === point[0] && d.y === point[1]) gens = d.g;
                            return d.x; }
                        );

我利用D3循环遍历所有节点/链接元素的事实，并让我访问数据对象的那些属性，直接查看节点我只能访问SVG元素。

我想也许可以在添加节点的过程中一次添加一个voronoi多边形。

这是小提琴：http://jsfiddle.net/4pmLm2gL/

优化Voronoi +强制定向布局

0 个答案: