SVG路徑中的D3 JS三角形
[英]d3 js triangle in svg path
問題描述
我必須創建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上未定義的屬性'size'”。
有人能幫我嗎？ 謝謝。
1 個解決方案
解決方案1
1 已采納 2017-04-27 04:51:07
您的錯誤是由於：
var triangle = d3.svg.symbolType["triangle-up"];
如果你固定在symbolType S上的錯字，這將返回undefined。 d3.svg.symbolTypes僅返回可用符號的數組，它不是創建新符號路徑生成器的機制。 也就是說，您真正想要的是：
var triangle = d3.svg.symbol().type("triangle-up");
這將創建一個適當的三角形符號生成器。
再進一步一點，我不確定您的意思是
從當前鼠標位置移開
您的代碼正好相反，並將所有三角形放在鼠標光標上。
編輯
<!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>
D3.js中三角形SVG路徑的過渡
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.