Javascript D3.js完全在svg容器内创建三角形

我必须在随机位置创建30个三角形；对于形状，我使用d3.symbolTriangle，我可以通过attr（“d”，triangle.size（dim）设置它的尺寸，这应该是三角形的面积。 问题是一些三角形并不完全在svg容器内，它有一些边界，而这些三角形的某些部分在外部（请参见图中）。 我怎样才能在容器中强制这些，比如用x像素的边缘线？ 这是我的代码：

 var width = window.innerWidth;
 var height = window.innerHeight;
 var triangle = d3.symbol()
    .type(d3.symbolTriangle);

 function drawTriangles(number) {
  for(var i=0;i<number;i++){
    var dim = Math.random()*300;
    console.log("Path: "+i+", dim: "+dim);
    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);
    }
}

var-width=window.innerWidth；
var height=window.innerHeight；
变量三角形=d3.symbol（）
.类型（d3.符号三角形）；
函数Draw三角形（编号）{
对于（var i=0；i，如果设置所需的裕度：

var margin = 20;

可以避免三角形的中心位于该边距内：

.attr("transform", function(d) 
    { return "translate(" + (margin + Math.random()*(width - margin)) 
    + "," + (margin + Math.random()*(height - margin)) + ")"; 
})

请记住，这并没有考虑到三角形大小不同的事实：它为每个人设置了相同的边距

这是小提琴：
如果您设置了所需的边距：

var margin = 20;

可以避免三角形的中心位于该边距内：

.attr("transform", function(d) 
    { return "translate(" + (margin + Math.random()*(width - margin)) 
    + "," + (margin + Math.random()*(height - margin)) + ")"; 
})

请记住，这并没有考虑到三角形大小不同的事实：它为每个人设置了相同的边距

这里是小提琴：
设置元素边界框的“平移”值时，您可以轻松使用它的大小

这很奇怪，但是对于完全位于svg内部的三角形来说，使用bbox高度是不可行的。形状宽度比它们的高度大几个像素，并且在计算中使用该值是可行的


var宽度=250；
var高度=250；
var数=30；
var-borderSize=1；
变量主体=d3。选择（“主体”）；
变量三角形=d3.symbol（）
.类型（d3.符号三角形）；
var svg=body.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.样式（“边框”，“1px纯黑”）；
函数Draw三角形（编号）{
对于（变量i=0；i

在设置元素边界框的“平移”值时，可以轻松使用它

这很奇怪，但是对于完全位于svg内部的三角形来说，使用bbox高度是不可行的。形状宽度比它们的高度大几个像素，并且在计算中使用该值是可行的


var宽度=250；
var高度=250；
var数=30；
var-borderSize=1；
变量主体=d3。选择（“主体”）；
变量三角形=d3.symbol（）
.类型（d3.符号三角形）；
var svg=body.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.样式（“边框”，“1px纯黑”）；
函数Draw三角形（编号）{
对于（变量i=0；i


你能提出更好的帮助吗？你能提出更好的帮助吗？谢谢你的回答，但它不起作用。我看到了d3.symbolTriangle（）的大小方法它考虑把它画成三角形的中心，所以如果三角形的半边或半高要比边距大，三角形就要出来了。这正是我在回答中所说的。只要把余量设置为符号的最大大小的一半以上，就用另一个答案。真糟糕。所以三角形的最大尺寸是300（dim=Math.random（）*300）：我把margin=310，所有的三角形都不显示在容器中。不，比这个小得多！一个300大小的三角形需要小于20像素的边距，就像我上面的代码一样。听着，只要使用Saeed的答案，对你更好。好的，我会写信给他。谢谢你花时间。谢谢你的答案，但它不起作用。我明白了d3.symbolTriangle（）的尺寸方法它考虑把它画成三角形的中心，所以如果三角形的半边或半高要比边距大，三角形就要出来了。这正是我在回答中所说的。只要把余量设置为符号的最大大小的一半以上，就用另一个答案。真糟糕。所以三角形的最大尺寸是300（dim=Math.random（）*300）：我把margin=310，所有的三角形都不显示在容器中。不，比这个小得多！一个300大小的三角形需要小于20像素的边距，就像我上面的代码一样。听着，只要使用Saeed的答案，对你更好。好的，我会写信给他。谢谢你花时间。嗨，谢谢你的答案。我也看到了这段代码我也有同样的问题（见图）。呵呵