D3.js：测量帧率

问题描述

在渲染SVG时是否有一种很好的方法来测量每秒绘制的帧数？

我正在研究绘图，希望测量渲染性能，但是除了Chrome性能工具外，我不确定如何执行此操作。

如果D3生态系统中有类似于通常在渲染循环中使用的stats包的助手，那么我很乐意看看...

解决方法

在three.js中使用的相同方法似乎在d3.js中起作用：

const getSize = () => ({
  w: window.innerWidth,h: window.innerHeight,})

/**
* Config
**/

const k = 1;
const zoomBounds = [0.5,32]; // min max zoom bounds
let size = getSize();

/**
* SVG
**/

const svg = d3.select('body').append('svg')
  .attr('id','scene')
  .attr('viewBox',[0,size.w,size.h]);

/**
* Add grid
**/

const gGrid = svg.append('g').attr('id','grid');

const grid = (g,x,y) => {
  g
  .attr('stroke','#eaeaea')
  .attr('stroke-opacity',1)
  .call(g => g
    .selectAll('.x')
    .data(x.ticks(10 * k))
    .join(
      enter => enter.append('line').attr('class','x').attr('y2',size.h),update => update,exit => exit.remove()
    )
    .attr('x1',d => x(d))
    .attr('x2',d => x(d)))
  .call(g => g
    .selectAll('.y')
    .data(y.ticks(12 * k))
    .join(
      enter => enter.append('line').attr('class','y').attr('x2',size.w),exit => exit.remove()
    )
    .attr('y1',d => y(d))
    .attr('y2',d => y(d)));
}

const gVertex = svg.append('g')
  .attr('id','vertices')
  .attr('fill','none')
  .attr('stroke-linecap','round');

/**
* Domains
**/

const x = d3.scaleLinear()
  .domain([-100,100])
  .range([0,size.w])

const y = d3.scaleLinear()
  .domain([-100,100])
  .range([size.h,0])

/**
* Add zoomability
**/

const zoom = d3.zoom()
  .scaleExtent(zoomBounds) // set bounds of zoomable area
  .on('zoom',function() {
    const transform = d3.event.transform; // contains zoom depth and x,y coords
    const zx = transform.rescaleX(x).interpolate(d3.interpolateRound);
    const zy = transform.rescaleY(y).interpolate(d3.interpolateRound);
    // run zoom operation on text layer
    gVertex.attr('transform',transform);
    // set the size of the text

    // update the grid sizing
    gGrid.call(grid,zx,zy);
  });

svg.call(zoom).call(zoom.transform,d3.zoomIdentity);

/**
* Stats
**/

const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

/**
* Render
**/

function render() {
  // fetch data from api
  const data = ["Curtis Gilbert","Ann Boyd","Kimberly Hicks","Dawn Braun","Gabriela Vega","Cory Morgan","Stuart Lopez","Anthony Paul","Jeffrey Frye","Andre Nicholson","Jeffrey Summers","Kayla Jackson","Melissa Campbell","Lisa Rodriguez","Kevin Hernandez","Mr. Dean Brooks","Angela Mckinney","Gabrielle Stewart PhD","Vanessa Massey","Mr. Jose Mcdonald MD","Jennifer Brown","Albert Baxter","Chris Todd","Vanessa Leonard","Kevin Johnson","Spencer Martinez","Linda Lee","Lauren Stewart","Chad Powell","Jennifer Mathis","Elizabeth Webster","James Patterson MD","Brandon Davidson","David Evans","Kathleen Pena","Donald Osborne","Sarah Ross","Jeremy Burke","Matthew Miller MD","Janet Abbott","Andrew Miller","Anthony Mack","Joshua Gomez","Glenn Doyle","Joseph Hall","James Martin","Roger Delgado","Shannon Jimenez","Christina Thompson","Angela Moore","Lisa Hatfield","Stephen Wilson","Janice Wong","Jon Frey MD","Veronica Booker","Jennifer Martinez","James Santiago","Linda Singleton PhD","Heidi Hill","Timothy Torres","Jonathan Reid","Brittney White","Amanda Gomez","Katelyn Richards","Christian Macdonald","Michelle Hunt","Francisco Herrera","Hector Sherman","Adam Arias","Rita Murray","Thomas Wood","Robert Munoz","Mark Richard","Barbara Mckay","Sabrina Buck","Mrs. Regina Murphy","Derek Pace","Edward Lucas","Nancy Bailey","George Brown","John Turner","Leroy Holt","Audrey Nunez","Crystal Thompson","Isaac Butler","Keith Guzman","Stephanie Holland","Nicole Pugh","Megan Bauer","Derek Green","Miranda Ellis","Hannah Buckley","Sergio Cox","Andrea Wood","Stephen Walker","Michelle Smith","Carl Brown","Gerald Mejia","Mary Monroe","Corey Moore"]  

  // draw the points
  const vertices = gVertex.selectAll('.vertex').data(data)

  vertices.enter()
    .append('text')
      .attr('class','vertex')
      .attr('x',d => Math.random() * 300)
      .attr('y',d => Math.random() * 300)
      .text(d => d)
}

/**
* Main
**/

function animate() {
  stats.begin();
  render();
  stats.end();
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/16/Stats.js'></script>
  </head>
  <style>
  * {
    margin: 0;
    padding: 0;
  }

  html,body {
    height: 100%;
  }

  html,body,svg {
    background-color: #f9f9f9;
  }

  text {
    fill: black;
    font-family: courier;
    font-size: 12px;
  }
  </style>
  <body></body>
</html>

只要所有动作都在渲染循环内发生，您就可以使用Stats.js来衡量性能...