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三角形：https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js

D3.js中三角形svg路径的转换

1 个答案: