d3在svg路徑中的js三角形

我必須創建30個從當前鼠標位置移開的三角形。我嘗試使用此代碼：d3在svg路徑中的js三角形

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無法讀取的未定義的屬性‘大小’」。

有人可以幫助我嗎？謝謝。

來源

2017-04-26 Alessio

我使用v3版本 – Alessio

你的錯誤是因爲：

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

如果你固定在symbolType 小號，這個返回undefined錯字。 d3.svg.symbolTypes只是返回一個可用符號數組，它不是創建新符號路徑生成器的機制。也就是說，你真正想要的是：

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

這創建了一個適當的三角形符號生成器。

採取這種遠一點，我不知道你所說的

that move away from current mouse position

您的代碼不會完全相反，並把鼠標光標所有三角形的意思......

EDITS

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

來源

2017-04-27 04:51:07 Mark

謝謝！如果我想離開現在的位置，我該怎麼辦？（三角形不得超出邊界）。 – Alessio

我想這樣做：https：//bl.ocks.org/mbostock/3231298，但與三角形，而不是圓... – Alessio

@Alessio，見上面的快速實施。 – Mark

d3在svg路徑中的js三角形

回答

相關問題