Question

我必须创建30个远离当前鼠标位置的三角形。我尝试使用此代码：

var body = d3.select("body");
var mouse = [];
var width = 1000;
var height = 600;
var numberOfTriangles = 30;
var isMouseMoving = false;
var triangle = d3.svg.symbolType["triangle-up"]

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

但是我有这个错误：“未捕获的TypeError：无法在drawTriangles读取未定义的属性'大小'”。

有人能帮助我吗？感谢。

Answer 1

您的错误是因为：

var triangle = d3.svg.symbolType["triangle-up"];

如果您修复了symbolType s 上的拼写错误，则返回undefined。 d3.svg.symbolTypes只返回一个可用符号数组，它不是创建新符号路径生成器的机制。那就是说，你真正想要的是：

var triangle = d3.svg.symbol().type("triangle-up");

这会创建一个合适的三角形符号生成器。

更进一步，我不确定你的意思

远离当前鼠标位置

您的代码完全相反，并将所有三角形放在鼠标光标上......

EDITS

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 300,
    height = 300;

var nodes = d3.range(200).map(function() { return {radius: Math.random() * 12 + 4}; }),
    root = nodes[0],
    color = d3.scale.category10();

root.radius = 0;
root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function(d, i) { return i ? 0 : -1000; })
    .nodes(nodes)
    .size([width, height]);

force.start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "1px solid black")
    .style("margin","20px");
    
var triangle = d3.svg.symbol().type("triangle-up");

svg.selectAll("path")
    .data(nodes.slice(1))
  .enter().append("path")
    .attr("d", function(d) {
        triangle.size(d.radius);
        return triangle();
    })
    .style("fill", function(d, i) { return color(i % 3); });

force.on("tick", function(e) {
  var q = d3.geom.quadtree(nodes),
      i = 0,
      n = nodes.length;

  while (++i < n) q.visit(collide(nodes[i]));

  svg.selectAll("path")
    .attr("transform", function(d){
      return "translate(" + d.x + "," + d.y + ")";
    });

});

svg.on("mousemove", function() {
  var p1 = d3.mouse(this);
  root.px = p1[0];
  root.py = p1[1];
  force.resume();
});

function collide(node) {
  var r = node.radius + 16,
      nx1 = node.x - r,
      nx2 = node.x + r,
      ny1 = node.y - r,
      ny2 = node.y + r;
  return function(quad, x1, y1, x2, y2) {
    if (quad.point && (quad.point !== node)) {
      var x = node.x - quad.point.x,
          y = node.y - quad.point.y,
          l = Math.sqrt(x * x + y * y),
          r = node.radius + quad.point.radius;
      if (l < r) {
        l = (l - r) / l * .5;
        node.x -= x *= l;
        node.y -= y *= l;
        quad.point.x += x;
        quad.point.y += y;      
        
      }
      
      if (node.x > width) node.x = width;
      if (node.x < 0) node.x = 0;
      if (node.y > height) node.y = height;
      if (node.y < 0) node.y = 0;

      
    }
    return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
  };
}

</script>

＆＃13;

s3g路径中的d3 js三角形

1 个答案: