d3 js triangle in svg path
Question
i must create 30 triangles that move away from current mouse position. i try with this code:
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()
});
but i have this error: "Uncaught TypeError: Cannot read property 'size' of undefined at drawTriangles".
Can someone help me? Thanks.
1 answers
solution1
1 ACCPTED 2017-04-27 04:51:07
Your error is because of:
var triangle = d3.svg.symbolType["triangle-up"];
If you fix the typo on symbolType s , this returns undefined. d3.svg.symbolTypes simply returns an array of available symbols, it is not a mechanism to create a new symbol path generator. That said, what you really wanted is:
var triangle = d3.svg.symbol().type("triangle-up");
This creates a proper triangle symbol generator.
Taking this a little further, I'm not sure what you mean by
that move away from current mouse position
Your code does the exact opposite and puts all the triangles on the mouse cursor...
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(" + dx + "," + dy + ")"; }); }); 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.