私はJSプロジェクトの初期段階です。 1つの形状の配置を除いて、これまではすべてがうまくいっています。問題の形状は、ティールダイヤモンド(正方形の45度回転)です。私は、画面上の正方形には問題を取得することはできませんが、私は追加するとき:d3.js奇数回転動作
.attr("transform", "rotate(45)")
正方形が適切に回転しますが、このように、画面の左部分に向けてシフト:
私はこれが起こる原因を確かめていません。それが助け場合は、ここでは、この結果を生成するコードの一部です:
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg
.append("rect")
.attr("transform", "rotate(45)")
.attr("x", 250)
.attr("height", w/10)
.attr("width", w/10)
.attr("fill", "teal")
注:私は「Y」属性を置く場合は、四角形が完全に消えます。
この原因は何ですか?私はちょうど私が見ることができない間違った何かをしましたか?
ああ、あなたは絶対に正しいです。どうもありがとう。だから今私は正確に中心になる形が必要です。Pythagorean Theormを使用して、断面の長さを見つけ、2で割った。その方程式の結果は、私の翻訳文のy座標として(キャンバスの高さ/もちろん2を引いたもの) 。私はここで変数を使用することができないように見えます。私はそれをどのようにすることができるか知っていますか? – 1080p
正しい順序で変換を行っている限り、ピタゴラスを使用する必要はありません。 'w'と' h'がキャンバスサイズで 'rw'と' rh'がRectのサイズであると仮定すると、これはあなたが求めていることを行うはずです: '.attr(" transform "、" translate( "+(w/2)+」、「+(h/2)+」)は、「(+ r-2)+」)最初にrectの左上を中心に移動し、次に45を回転させて、45度の軸に沿って半分幅と半分の高さに戻します - キャンバスが300x300でrectが100x100の場合: "翻訳する(150,150)回転する(45)翻訳する(-50、-50)" – meetamit
興味深い:私のコードに既にPythagoreanを設定していますが、方法が速ければ交換してもかまいません。ヘルプ。 – 1080p