D3.js内の三角形のSVGパスの遷移

Question

体の中のランダムな位置に、現在のマウスの位置から離れている異なる大きさと色の30の正三角形を作成したいと思います。体の境界線。ここで

は、コードは次のとおりです。

var body = d3.select("body"); 
var mouse = []; 
var width = 1000; 
var height = 600; 
var numberOfTriangles = 30; 
var isMouseMoving = false; 
var triangle = d3.symbol() 
    .type(d3.symbolTriangle);  

function drawTriangles(number) { 
for(var i=0;i<number;i++){ 
    var dim = Math.random()*400; 
    svg.append("path") 
     .attr("d", triangle.size(dim)) 
     .attr("transform", function(d) { return "translate(" + Math.random()*width + "," + Math.random()*height + ")"; }) 
     .attr("fill", "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")") 
     .attr("opacity", 2) 
     .attr("class", "path"+i); 
} 
} 

function moveMouse(number) { 
if (isMouseMoving) { 
    console.log("posix: x="+mouse[0]+",y="+mouse[1]+"\n"); 
    for(var i=0;i<number;i++){ 
     svg.select('.path'+i).transition().duration(5) 
      .attr({'x':-mouse[0],'y':-mouse[1]}) 
    } 
} 
} 

var svg = body.append("svg") 
.attr("width", width) 
.attr("height", height) 
.style("border", "1px solid black") 
.on("mousemove", function() { 
    mouse = d3.mouse(this); 
    isMouseMoving=true; 
}); 


drawTriangles(numberOfTriangles); 
d3.timer(function(){moveMouse(numberOfTriangles)}); 

私はいくつか質問があります。

1）どのように体内に三角形を配置するの？このようにして私が行ったことは、三角形の少しの部分が体の外側にあることです。 Math.random（）* weightとMath.random（）* heightは十分ではありませんか？

2）私が行ったような移行を実装するいくつかの例を見ましたが、私の場合はうまくいきません。どのようにして三角形の遷移を実装して、マウスの現在の位置から離れ、それらが身体の境界から短い距離で止まるようにすることができますか？

アドバイスをいただきありがとうございます。

Answer 1

1）三角形の描画方法によって異なります。

d3.symbolTriangleがlineToを負のxの領域に描画すると、あなたの三角形の左半分があなたの体の境界で切断される可能性があります。

x方向に平行移動するとき、三角形の幅の1/2を追加してみてください。

2）現時点では、コードは三角形をマウスの位置に移動しようとしています。ここではその作業は次のとおりです。

var body = d3.select("body"); 
var mouse = []; 
var width = 1000; 
var height = 600; 
var numberOfTriangles = 30; 
var isMouseMoving = false; 
var triangle = d3.symbol() 
    .type(d3.symbolTriangle); 

function drawTriangles(number) { 
    for (var i = 0; i < number; i++) { 
    var dim = Math.random() * 400; 
    svg.append("path") 
     .attr("d", triangle.size(dim)) 
     .attr("transform", function(d) { 
     return "translate(" + Math.random() * width + "," + Math.random() * height + ")"; 
     }) 
     .attr("fill", "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")") 
     .attr("opacity", 2) 
     .attr("class", "path" + i); 
    } 
} 

function moveMouse() { 
    if (isMouseMoving) { 
    //console.log("posix: x="+mouse[0]+",y="+mouse[1]+"\n"); 

    svg.selectAll('path').each(function(d, i) { 
     var self = d3.select(this); 
     self.attr('transform', function() { 
     return "translate(" + mouse[0] + "," + mouse[1] + ")"; 
     }) 
    }) 

    } 
} 

var svg = body.append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .style("border", "1px solid black") 
    .on("mousemove", function() { 
    mouse = d3.mouse(this); 
    isMouseMoving = true; 
    }); 


drawTriangles(numberOfTriangles); 
d3.timer(function() { 
    moveMouse() 
}); 

フィドル：https://jsfiddle.net/hLcvdpjk/

D3の三角形：D3のhttps://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js