d3 js svgパスの三角形

現在のマウスの位置から離れた30の三角形を作成する必要があります。私はこのコードを試してみてください。d3 js svgパスの三角形

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で未定義の『サイズ』プロパティを読み取ることができませんが」。

誰かが私を助けることができますか？ありがとう。あなたはsymbolTypeはのにタイプミスを修正した場合、これはundefinedを返します

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

：

出典

2017-04-26 Alessio

v3のバージョン – Alessio

あなたの誤差があるためです。 d3.svg.symbolTypesは、単に使用可能なシンボルの配列を返しますが、新しいシンボルパスジェネレータを作成するメカニズムではありません。あなたが本当に欲しかったのは次のとおりです：

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

これは、適切な三角形記号ジェネレータを作成します。 EDITS

...

をさらに少しこれを考えると、私はあなたがあなたのコードは正反対を行い、マウスカーソル上のすべての三角形を置く

that move away from current mouse position

によって何を意味するかわからないんだけど

私が使用

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

答えて

関連する問題