D3.js中三角形SVG路径的过渡

Question

I would like to create 30 equilateral triangles of different dimensions and colors, in a random position inside the body, that are moving away from the current mouse position, stopping at a short distance from the border of the body.

Here is the code:

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

I have few questions:

1) How to position the triangles inside the body? In this way that I have done, a little part of some triangles is outside the body. Math.random()*weight and Math.random()*height are not enough?

2) I saw some examples that implement the transition like I have done, but in my case doesn't work. How can I implement the transition of the triangles so that they move away from the current position of the mouse and they stop at a short distance from the border of the body?

Thank you in advice.

Answer 1

1) It depends on how the triangles are drawn.

If d3.symbolTriangle draws lineTo into negative x territory (i think it does), then you have the potential that the left half of your triangle will be cut off by the bounds of your body.

Try adding 1/2 of the triangle's width when you translate it on the x direction.

2) At the moment, your code is attempting to move the triangles to the position of the mouse, not away from it. Here is that working:

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

Fiddle: https://jsfiddle.net/hLcvdpjk/

D3 triangle: https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js