如何更好地组织网格线？

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