好吧,我正在尝试绘制 RGB 值的图形,以便我可以轻松地知道将什么作为 K 均值定理的 K 值。
但我想弄清楚的是我应该如何绘制我的 3 维数据。现在我正在尝试使用 css3 和 -webkit-transform: translate3d(x, y, z);属性(property)。但是我无法想象每次轮换和内容应该是什么。
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>
';
我完全可以使用有人已经用 canvas 等制作的系统。我只见过用 java 或 flash 绘制的图。
最佳答案
您可以在此处查看演示: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 箭头。
Demo
另请查看我制作的这个网络应用程序,它显示了一个 3D 实体定义了一些方程式(不是动态的)以及一些旋转和缩放控件:http://apps.visualpulse.net/calculus-solid/
关于css - 使用 CSS 或 Canvas 的 Web 3D 散点图 (XYZ/RGB),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8875372/