d3 + socket.io로 부드럽게 전환하는 방법

서버에서 업데이트가 발생할 때마다 ping이 발생하는 d3.js 트리 맵이 있습니다. 업데이트가 트위터 스트림에서 나옵니다. 많은 업데이 트가 있습니다. treemap은 1500 ms 전환이 완료되기 전에 이미 여러 번 업데이트되었으므로 애니메이션에서 매우 엉망입니다.d3 + socket.io로 부드럽게 전환하는 방법

보기를 업데이트하는 코드에서 노드 값을 업데이트하는 코드를 분리 할 수 있습니까? treemap의 값을 지속적으로 업데이트하는 솔루션을 찾고 1500-2000ms마다보기 만 업데이트하기를 바랍니다.

참조하십시오 내 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"; }); 
}

이 코드는 (내 데이터가 콜백보다는 JSON에서 유래) 사소한 변경과 함께, 우수한 bl.ocks.org 웹 사이트의 treemap example에서 찍은. 나는 socket.on() 외부의 setInterval()을 가진 뷰 논리에서 값 논리를 분할하려고 시도했지만, 시도는 전환을 느리게하지 못하거나 트리 맵을 완전히 중단시킵니다.

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);

통찰력에 대해 많은 감사드립니다!

출처

2014-03-19 user2954463

당신이하고 싶은 것은 debounce라고합니다. 당신이 사용할 수있는 자바 스크립트 라이브러리가 여러 개 있습니다 (저는 밑줄을 씁니다). 너는 너 자신도 쓸 수 있었다. 당신이 구현하거나 훔친 디 바운스 기능이 있으면

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

가, 나머지는 간단하다 :

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

: 당신은 디 바운스와 갱신에 당신을 처리하는 기능을 래핑 나는 a blog post이 하나를 발견

출처

2015-10-26 05:26:08

d3 + socket.io로 부드럽게 전환하는 방법

답변

관련 문제