个人中心
gpt4 book ai didi

javascript - svg 路径中​​的 d3 js 三 Angular 形

转载 作者：行者123 更新时间：2023-12-03 04:27:33 25 4
gpt4 key购买 nike

我必须创建 30 个远离当前鼠标位置的三 Angular 形。我尝试使用以下代码:

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

但我有这个错误:“未捕获类型错误:无法读取在drawTriangles处未定义的属性“大小””。

有人可以帮助我吗？谢谢。

最佳答案

您的错误是由于:

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

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

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

这将创建一个正确的三 Angular 形符号生成器。

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

that move away from current mouse position

您的代码执行完全相反的操作，并将所有三 Angular 形放在鼠标光标上...

编辑

<!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>

关于javascript - svg 路径中​​的 d3 js 三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43636394/

25 4 0
文章推荐： javascript - 在 Angular 中挣扎于 AuthGuard
文章推荐： javascript - Chrome 不保留 CORS cookie
文章推荐： javascript - 如何在 Angular 2 中绕过路由器
文章推荐： javascript - 将 JSON 文件中的数据绑定(bind)到 Angular 2 View
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com