D3.jsは完全にsvgコンテナ内に三角形を作成します

ランダムな位置に30の三角形を作成する必要があります。私はd3.symbolTriangleを使用している形状のために、私は三角形の領域でなければならないattr（ "d"、triangle.size（dim））を通して次元を設定することができます問題は三角形が xピクセルのマージンのように、これらをコンテナ内に強制するにはどうすればいいですか？これは私のコードです：D3.jsは完全にsvgコンテナ内に三角形を作成します

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/

あなたは、コンテナ内にない青い三角形見ることができます： 01あなたが必要なマージンを設定した場合

出典

2016-09-04 Anonymous

方が良いの助けを[フィドル]（https://jsfiddle.net/）を作ることはできますか？ – xameeramir

https://jsfiddle.net/jjr3kqao/ –

：これは取らないことに注意して

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

あります

var margin = 20;

をあなたはそのマージン内に配置された彼らのセンターを持つ三角形を避けることができます三角形の大きさが異なることを考慮して、それはすべての人に同じマージンを設定します。あなたはそれが値を翻訳だ設定するとhttps://jsfiddle.net/7qkqtwmu/

出典

2016-09-04 15:04:26

ありがとうございますが、うまくいきませんでした。私はd3.symbolTriangle（）のsizeメソッドを見て、それを三角形の中心に描画すると考えます。したがって、三角形の半分または半分の高さがマージンより大きい場合、三角形が外に出ます。 –

それは私が私の答えで言ったことです！他の答えと同様に、シンボルの最大サイズの半分以上のマージンを設定して、getBBoxを使用してください。 –

私は理解できませんでした、私の英語はたわごとです。したがって、三角形の最大寸法は300です（dim = Math.random（）* 300）：マージン= 310を入れ、すべての三角形がコンテナに表示されません。 –

あなたは簡単に要素バウンディングボックスのサイズを使用することができます。ここでは

はフィドルです。

これは奇妙ですが、三角形が完全にsvg内にあるためには、bboxの高さを使用しても機能しません。シェイプの幅は、高さよりも2倍大きいピクセルで、その値を計算に使用します。

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>

出典

2016-09-04 15:06:27 Mehraban

こんにちは、ありがとうございました。私はこのコードでも同じ問題があることを理解しています（画像参照）。どうすれば束縛を強めることができますか？例えばthis.getBBox（）+ 10を置くと、すべての三角形は左上の（0,0）点の近くにあります。 http://imgur.com/2OrmVeA –

@ MaVeRicK_91コードスニペットを実行するとエラーが発生しますか？問題がなくなったことを確認するために、複数回実行することができます。問題が解決しない場合は、私にそれを示すフィドルをドロップしてください。 – Mehraban

はい、コメント内の画像はコードからのものです。多分それは私が置いた国境のためですか？ –

D3.jsは完全にsvgコンテナ内に三角形を作成します

答えて

関連する問題