d3ジオアニメーションが停止しない

私はd3.jsで興味深いと思われるもののいくつかの感触を得ようとしています。もちろん、私はbl.ocks.orgからいくつかのコードを取り除き、理由を理解していない状態で休憩しています。d3ジオアニメーションが停止しない

これは表示されるよりも大きな問題であるか、私には明らかなものがありませんが、地球儀が選択されたときやアニメーションボックスのチェックが外されたときに回転アニメーションを停止することはできません。それ以外はがと思われます。

は、ここで私はd3.v4で行っているものです：

var feature; 

var projection = d3.geoOrthographic() 
    .scale(380) 
    .rotate([71.03,-42.37]) 
    .clipAngle(90) 
    .translate([400, 400]); 

var path = d3.geoPath() 
    .projection(projection); 

var svg = d3.select("#body").append("svg:svg") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .on("mousedown", mousedown); 

if (frameElement) frameElement.style.height = '800px'; 

d3.json("https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json", function(collection) { 
    feature = svg.selectAll("path") 
     .data(collection.features) 
    .enter().append("svg:path") 
     .attr("d",clip); 

    feature.append("svg:title") 
     .text(function(d) { return d.properties.name; }); 

    startAnimation(); 

    d3.select('#animate').on('click', function() { 
    if (done) startAnimation(); else stopAnimation(); 
    }); 
}); 

function stopAnimation() { 
    done = true; 
    d3.select('#animate').node().checked = false; 
} 

function startAnimation() { 
    done = false; 
    d3.timer(function() { 
    var rotate = projection.rotate(); 
    rotate = [rotate[0] + 0.1, rotate[1]]; 
    projection.rotate(rotate); 
    refresh(); 
    return done; 
    }); 
} 

function animationState() { 
    return 'animation: '+ (done ? 'off' : 'on'); 
} 

d3.select(window) 
    .on("mousemove", mousemove) 
    .on("mouseup", mouseup); 


var m0 
    , o0 
    , done 
    ; 

function mousedown() { 
    stopAnimation(); 
    m0 = [d3.event.pageX, d3.event.pageY]; 
    o0 = projection.rotate(); 
    d3.event.preventDefault(); 
} 

function mousemove() { 
    if (m0) { 
    var m1 = [d3.event.pageX, d3.event.pageY] 
     , o1 = [o0[0] - (m0[0] - m1[0])/8, o0[1] - (m1[1] - m0[1])/8]; 
    projection.rotate(o1); 
    refresh(); 
    } 
} 

function mouseup() { 
    if (m0) { 
    mousemove(); 
    m0 = null; 
    } 
} 

function refresh(duration) { 
    (duration ? feature.transition().duration(duration) : feature).attr("d",clip); 
} 

function clip(d) { 
    return path(d); 
} 

function reframe(css) { 
    for (var name in css) 
    frameElement.style[name] = css[name] + 'px'; 
}

元のコードを参照するためのhttp://bl.ocks.org/johan/1392488で見つけることができます。

出典

2017-11-19 sli

リンクされた例では、実際に古いバージョンのd3（バージョン2）が使用されています。 done変数がfalseに設定されているため、そのバージョンでアニメーションが停止したと考えられます。タイマー関数はfalseを返し、実行を停止します。しかしバージョン4では、.stop()への明示的な呼び出しが必要です。

ここまでパッチを適用コードです：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="tip">drag to rotate the origin</div> 
 
     <div><label for="animate">animate:</label> 
 
      <input id="animate" type="checkbox" checked> 
 
     </div> 
 
    <div id="body" style="width:800px;height:800px"></div> 
 
    <script> 
 
     var feature; 
 

 
var projection = d3.geoOrthographic() 
 
    .scale(380) 
 
    .rotate([71.03,-42.37]) 
 
    .clipAngle(90) 
 
    .translate([400, 400]); 
 

 
var path = d3.geoPath() 
 
    .projection(projection); 
 

 
var svg = d3.select("#body").append("svg:svg") 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 
    .on("mousedown", mousedown); 
 
    
 
if (frameElement) frameElement.style.height = '800px'; 
 

 
d3.json("https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json", function(collection) { 
 
    feature = svg.selectAll("path") 
 
     .data(collection.features) 
 
    .enter().append("svg:path") 
 
     .attr("d",clip); 
 

 
    feature.append("svg:title") 
 
     .text(function(d) { return d.properties.name; }); 
 

 
    startAnimation(); 
 

 
    d3.select('#animate').on('click', function() { 
 
    if (done) startAnimation(); else stopAnimation(); 
 
    }); 
 
}); 
 

 
function stopAnimation() { 
 
    done = true; 
 
    d3.select('#animate').node().checked = false; 
 
    timer.stop(); 
 
} 
 

 
function startAnimation() { 
 
    done = false; 
 
    timer = d3.timer(function() { 
 
    var rotate = projection.rotate(); 
 
    rotate = [rotate[0] + 0.1, rotate[1]]; 
 
    projection.rotate(rotate); 
 
    refresh(); 
 
    }); 
 
} 
 

 
d3.select(window) 
 
    .on("mousemove", mousemove) 
 
    .on("mouseup", mouseup); 
 

 

 
var m0 
 
    , o0 
 
    , done 
 
    , timer 
 
    ; 
 

 
function mousedown() { 
 
    stopAnimation(); 
 
    m0 = [d3.event.pageX, d3.event.pageY]; 
 
    o0 = projection.rotate(); 
 
    d3.event.preventDefault(); 
 
} 
 

 
function mousemove() { 
 
    if (m0) { 
 
    var m1 = [d3.event.pageX, d3.event.pageY] 
 
     , o1 = [o0[0] - (m0[0] - m1[0])/8, o0[1] - (m1[1] - m0[1])/8]; 
 
    projection.rotate(o1); 
 
    refresh(); 
 
    } 
 
} 
 

 
function mouseup() { 
 
    if (m0) { 
 
    mousemove(); 
 
    m0 = null; 
 
    } 
 
} 
 

 
function refresh(duration) { 
 
    (duration ? feature.transition().duration(duration) : feature).attr("d",clip); 
 
} 
 

 
function clip(d) { 
 
    return path(d); 
 
} 
 

 
function reframe(css) { 
 
    for (var name in css) 
 
    frameElement.style[name] = css[name] + 'px'; 
 
} 
 
    </script> 
 
    </body> 
 

 
</html>

出典

2017-11-19 19:01:59 Mark

d3ジオアニメーションが停止しない

答えて

関連する問題