0

さて、K 平均値定理の K の値として何を入れるべきかを簡単に知ることができるように、RGB 値をグラフ化しようとしています。

しかし、私が理解しようとしているのは、3 次元データをどのようにグラフ化するかです。現在、css3 と -webkit-transform: translate3d(x, y, z); を使用しようとしています。財産。しかし、私はそれぞれのローテーションやものがあるべき姿を視覚化するのに苦労しています.

echo '
    <div style="width: 500px; height: 500px; background: #ffffff; -webkit-transform: perspective(800); -webkit-transform-style: preserve-3d;">
        <div style="-webkit-transform: rotateZ(0deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateY(-45deg); -webkit-transform-style: preserve-3d; position: relative;">
        <div style="-webkit-transform: rotateX(-15deg); -webkit-transform-style: preserve-3d; position: relative;">
';
            foreach($Kmean_array['clusters'] as $key_cluster => $cluster)
            {
                foreach($cluster['points'] as $key_point => $point)
                {
                    echo '
                    <div style="position: absolute; opacity: .2; width: 4px; height: 4px; background: #', $Kmean_array['chosen_centroid']['hex'] ,'; -webkit-transform: translate3d(', $point['rgb']['r'] ,'px, ', $point['rgb']['g'] ,'px, ',$point['rgb']['b'] ,'px);"></div>
                    ';
                }
            }
echo '
        </div>
        </div>
        </div>
    </div>
';

私は、誰かがキャンバスなどですでに作成したシステムを完全に使用しています。Javaまたはフラッシュでプロットを見たことがあります。

4

1 に答える 1

0

ここでデモを見ることができます:http://jsfiddle.net/MadLittleMods/yhCpf/

ポイントを追加するには、各色について以下のガイドラインに従ってください。

Red: 251 - {Your Red}
Green: 251 - {Your Green
Blue: -124 + {Your Blue}

たとえば、色が255、85、89の場合、これは#FF554Fです。あなたのポイントは次のようになります:

<div class="point" style="-webkit-transform: translate3d(-4px, 166px, -35px); -moz-transform: translate3d(0px, 170px, -39px); -o-transform: translate3d(0px, 170px, -39px); -ms-transform: translate3d(0px, 170px, -39px); transform: translate3d(0px, 170px, -39px);">
    <div class="face one"></div>
    <div class="face two"></div>
    <div class="face three"></div>
    <div class="face four"></div>
    <div class="face five"></div>
    <div class="face six"></div>
</div>

足し算と引き算をしなければならない理由は、平面の原点が0、0、0ではなく、251、251、-124にあるためです。

更新(2013-11-9):

これが私が作った(0、0、0)素晴らしい3D軸です。各軸の正の方向を指す3D矢印が含まれています。

デモ

また、私が作成したこのWebアプリをチェックしてください。これは、回転とズームのコントロールを使用して、いくつかの方程式(動的ではない)を定義した3Dソリッドを示しています。http://apps.visualpulse.net/calculus-solid/

于 2012-01-16T21:05:07.493 に答える