Question

我必须在随机位置创建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);
    }
}

这是小提琴：https://jsfiddle.net/jjr3kqao/

您可以看到不在容器内的蓝色三角形：

Answer 1

设置元素边界框大小时，可以轻松使用元素边界框大小。

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

var width = 250;
var height = 250;
var number = 30;
var borderSize = 1;
var body = d3.select("body");
var triangle = d3.symbol()
  .type(d3.symbolTriangle);

var svg = body.append("svg")
  .attr("width", width)
  .attr("height", height)
  .style("border", "1px solid black");


function drawTriangles(number) {
  for (var i = 0; i < number; i++) {
    var dim = Math.random() * 300;
    svg.append("path")
      .attr("d", triangle.size(dim))
      .attr("transform", function (d) {
        var boundingBox = this.getBBox();
        var elementWidth = Math.ceil(boundingBox.width);
        var randomXOffset = Math.random() * (width - elementWidth - 2 * borderSize) + elementWidth/2 + borderSize;
        var randomYOffset = Math.random() * (height - elementWidth - 2 * borderSize) + elementWidth/2 + borderSize;
        return "translate(" + randomXOffset + "," + randomYOffset + ")";
      })
      .attr("fill", "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")")
      .attr("opacity", 2)
      .attr("class", "path" + i);
  }
}

drawTriangles(number);

<script src="https://d3js.org/d3.v4.min.js"></script>

<body>
</body>

Answer 2

如果您设置了所需的保证金：

var margin = 20;

您可以避免将 center 放置在该边距内的三角形：

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

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

这是小提琴：https://jsfiddle.net/7qkqtwmu/

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

2 个答案: