Question

我有一个d3.js树形图，每次服务器发出更新时都会被ping。更新内容正在推特上流传;有很多更新。因此，树图在其动画中非常不稳定，因为它在1500毫秒过渡完成之前已经多次更新。

是否可以将更新节点值的代码与更新视图的代码分开？我希望找到一个能够连续更新树形图值的解决方案，但每隔1500 - 2000毫秒才更新一次视图。

请查看我的完整d3 script：

var socket = io.connect();

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 1000 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(false)
    .value(function(d) { return d.size; });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

var root;

socket.on('update', function(stream) {
  console.log('tweets')

  div.datum(root).selectAll(".node").remove();

  root = stream.masterlist;

  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .text(function(d) { return d.children ? null : d.name; });

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

此代码取自优秀的bl.ocks.org网站上的treemap example，稍有修改（我的数据来自回调而不是json）。我试图将视图逻辑中的值逻辑与setInterval()之外的socket.on()分开，但我的尝试要么不能减慢转换速度，要么完全破坏树形图。

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

  });
}); // end socket.on();

setInterval(function() {
  node
      .data(treemap.value(value).nodes)
    .transition()
      .duration(1500)
      .call(position);
  }, 2000);

非常感谢任何见解！

Answer 1

你想要做的是被称为去抖动。有几个javascript库有一个你可以使用（我使用下划线）。你也可以自己写一个。我在a blog post中找到了这个：

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

一旦你有一个你实现或偷走的去抖功能，其余的很简单：你只需用debounce包装处理你的更新功能：

socket.on('update', debounce(function(stream) {
  console.log('tweets')
  ...
}));

如何使用d3 + socket.io进行平滑过渡

1 个答案: