如何更好地組織網格線？

Question

有點的網格線。

是否有另一種更好的性能解決方案，因爲如果我添加了許多svg元素（例如矩形，圓形，路徑）並增加了網格的維度，我將在使用縮放，移動元素時看到凍結效果。 。

網格的大小發生了變化。

另外，如何創建無限的網格線，而不是有限的（gridCountX，gridCountY）？

感謝

var svg = d3.select("body").append("svg"); 
 
var svgG = svg.append("g"); 
 

 
var gridLines = svgG.append("g").classed("grid-lines-container", true).data(["gridLines"]); 
 

 
var gridCountX = _.range(100); 
 
var gridCountY = _.range(100); 
 
var size = 10; 
 

 
gridLines.selectAll("g").data(gridCountY) 
 
    .enter() 
 
    .append("g") 
 
    .each(function(d) { 
 
     d3.select(this).selectAll("circle").data(gridCountX).enter() 
 
      .append("circle") 
 
      .attr("cx", function(_d) {return _d*size;}) 
 
      .attr("cy", function(_d) {return d*size;}) 
 
      .attr("r", 0.5) 
 
      .attr("style", function() { 
 
       return "stroke: black;"; 
 
      }); 
 
    }); 
 

 
var zoomSvg = d3.zoom() 
 
     .scaleExtent([1, 10]) 
 
     .on("zoom", function(){ 
 
      svgG.attr("transform", d3.event.transform); 
 
     }); 
 
    
 
svg.call(zoomSvg);

svg { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #a1a1a1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 1

當你注意，這種方法是不是真的可擴展性和對性能有較大的影響。我發現利用網格d3軸的方法對性能影響最小，同時與變焦相結合也相對簡單，這樣您就可以通過自動生成的「魔術」以一種合理的方式更新網格線，從而實現無限縮放在d3中明智的勾號位置。

爲了實現D3 V4類似的東西，你可以做一些沿着這些路線：

var svg = d3.select("svg"), 
    margin = {top: 20, right: 140, bottom: 50, left: 70}, 
    width = svg.attr("width") - margin.left - margin.right, 
    height = svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"), 
    innerSvg = g.append("svg").attr("width", width).attr("height", height); 

// Calculate domain for x and y from data and store in x0, y0 (not shown here) 
x.domain(x0); 
y.domain(y0); 

xGridAxis = d3.axisBottom(x).ticks(10); 
yGridAxis = d3.axisLeft(y).ticks(10 * height/width); 


// Create grouping and additional set of axes for displaying grid 
innerSvg.append("g") 
    .attr("class", "grid x-grid") 
    .attr("transform", "translate (0," + height + ")") 
    .call(xGridAxis 
       .tickSize(-height, 0, 0) 
       .tickFormat("") 
    ) 
    .selectAll(".tick"); 

innerSvg.append("g") 
    .attr("class", "grid y-grid") 
    .attr("transform", "translate (" + width + ", 0)") 
    .call(yGridAxis 
       .tickSize(width) 
       .tickFormat("") 
    ); 

// Add element to capture mouse events for drag and pan of plots 
var zoom = d3.zoom() 
    .on("zoom", zoomed); 

var scrollZoom = innerSvg.append("rect") 
    .attr("class", "zoom") 
    .attr("width", width) 
    .attr("height", height) 
    .attr("pointer-events", "all") // Defaults to panning with mouse 
    .call(zoom); 

// Mouse panning and scroll-zoom implementation using d3.zoom 
// Modification of : http://bl.ocks.org/lorenzopub/013c0c41f9ffab4d27f860127f79c5f5 
function zoomed() { 
    lastEventTransform = d3.event.transform; 
    // Rescale the grid using the new transform associated with zoom/pan action 
    svg.select(".x-grid").call(xGridAxis.scale(lastEventTransform.rescaleX(x))); 
    svg.select(".y-grid").call(yGridAxis.scale(lastEventTransform.rescaleY(y))); 

    // Calculate transformed x and y locations which are used to redraw all plot elements 
    var xt = lastEventTransform.rescaleX(x), 
     yt = lastEventTransform.rescaleY(y); 

    // Code below just shows how you might do it. Will need to tweak based on your plot 
    var line = d3.line() 
     .x(function(d) { return xt(d.x); }) 
     .y(function(d) { return yt(d.y); }); 

    innerSvg.selectAll(".line") 
     .attr("d", function(d) { return line(d.values); }); 

    innerSvg.selectAll(".dot") 
     .attr("cx", function(d) {return xt(d.x); }) 
     .attr("cy", function(d) {return yt(d.y); }); 
} 

這裏是D3 v4進行摸索出的例子，啓發我上面的版本：

http://bl.ocks.org/lorenzopub/013c0c41f9ffab4d27f860127f79c5f5