cocos2dx-lua制作游戏五维图

首先对五维图的五个顶点采集，可以使用Mark Man. 然后把五个点转为相对于五维图中心点的坐标。

local pointVec = {
    [1] = {width = 0, height = 79},
    [2] = {width = 81, height = 19.5},
    [3] = {width = 51, height = -74},
    [4] = {width = -51, height = -74},
    [5] = {width = -81, height = 19.5}
}

这五个点的顺序是从最上面按照顺时针排序的，可以根据自己的需求排序。
接下来有两种选择：
- 使用cocos2dx-lua自带的DrawNode来画出五维图，可以自己百度一下怎么做，因为这种方式画出来的线会有锯齿，所以被我放弃了。
- 使用一张渐变的线条图片进行拉伸操作。
接下来我使用第二种方式实现。

function Ref:drawPoly()
    local vertices = {}
    for i=1,#self.creature.totalAttr do
        local percent = self.creature.totalAttr[i] / limit
        local x,y = pointVec[i].width * percent, pointVec[i].height * percent
        table.insert(vertices, cc.p(x, y))
    end
    for i=1,#vertices do
        local point1 = vertices[i]
        local point2 = {}
        if i == #vertices then
            point2 = vertices[1]
        else
            point2 = vertices[i+1]
        end
        local vec = {}
        --向量以下为正方向
        if point2.y < point1.y then
            vec = cc.p(point2.x-point1.x, point2.y-point1.y)
        else
            vec = cc.p(point1.x-point2.x, point1.y-point2.y)
        end

        local angle = math.deg(math.acos(vec.x / (math.sqrt(math.pow(vec.x, 2) + math.pow(vec.y, 2)))))
        local midPoint = cc.p((point1.x+point2.x)/2, (point1.y+point2.y)/2)
        local length = math.sqrt(math.pow((point2.y-point1.y),2)+math.pow((point2.x-point1.x),2))
        local line = cc.Sprite:create(linePath):addTo(self.ccbNodeDrawLine):move(midPoint)
        line:setRotation(angle)
        line:setScaleX(length/line:getContentSize().width)
        line:setScaleY(0.6)
        cc.Sprite:create(pointPath):addTo(self.ccbNodeDrawLine):move(vertices[i])
    end
end

效果示意图：

注：代码部分变量在其他地方定义，不影响逻辑，请改为自己定义的变量。

一、前言

• 这将是个有趣的帖子，上次我写到了关于变色散点图的二维、三维绘制。在二维散点图绘制中，颜色变化映射的数据是y值；三维绘制中，颜色的变化映射的数据是z值。
• 正常来说，我们碰到的绘图数据大多数情况是二、三维的。但是四、五、六、七维度的情况还是存在的，我最近做项目的时候遇到了六维度数据可视化的问题，在查找相关资料的时候受到 【Matlab】散点图之五维数据可视化和matlab的四维图像数据可视化 两位博主优秀帖子的启发，顺利完成了六维度数据的可视化。同时，对于四维、五维、六维、七维数据在散点图上的可视化方案自己也做出了一些思考，特此记录。
  

二、散点图特征分析

（1）原理分析：

1. 对于二维散点图来说，可以利用的特征有：x值 、y值、散点的大小、散点的填充颜色、散点的线框颜色、散点的形状。六大特征，这就意味着对于二维散点图可以进行二到六维数据的可视化操作。

2. 对于三维散点图来说，可以利用的特征有：x值 、y值 、z值、散点的大小、散点的填充颜色、散点的线框颜色、散点的形状。七大特征，这就意味着对于三维散点图可以进行三到七维数据的可视化操作。

基于上述分析，利用散点图实现对四维、五维、六维甚至七维数据的可视化是可行的方案，具体需要根据自己的数据情况来进行方案选择。

（2）方案分析：

四维数据进行可视化方案

大体可以有两种方案：

1. 采用二维散点图。除了x值、y值以外，在散点的大小、散点的填充颜色、散点的线框颜色、散点的形状四个特征中任选其二。选择时应该考虑你的数据量大小。
2. 采用三维散点图。除了x值 、y值、z值以外，在散点的大小、散点的填充颜色、散点的线框颜色、散点的形状四个特征中任选其一。同样，选择时应该考虑你的数据量大小。

五维数据进行可视化方案

大体也可以有两种方案：

1. 采用二维散点图。除了x值、y值以外，在散点的大小、散点的填充颜色、散点的线框颜色、散点的形状四个特征中任选其三。选择时应该考虑你的数据量大小。
2. 采用三维散点图。除了x值 、y值、z值以外，在散点的大小、散点的填充颜色、散点的线框颜色、散点的形状四个特征中任选其二。同样，选择时应该考虑你的数据量大小。

六维数据进行可视化方案

思路同上，在下面我会以六维数据的散点图可视化为例做出示意。

七维数据进行可视化方案

需要注意的是七维数据的表达就只能采用三维散点图加上其余四项特征了。

三、散点图之六维数据可视化示例

本方案采用三维散点图＋散点的大小、散点的填充颜色、散点的线框颜色六个特征对数据进行可视化操作，并且方案实施分为三步：

step1、三维数据进行可视化

1. 在变色散点图的二维、三维绘制中，我写到了利用scatter3函数进行三维散点图的基本绘制，将六维中的三维数据可视化出来。

clc;
clear;
A=magic(6);
x=A(:,1);
y=A(:,2);
z=A(:,3);
scatter3(x,y,z);

step2、五维数据进行可视化

2. 利用scatter中控制散点大小的sz和颜色分布的c 映射另外两维数据,并添加对应的图例。

 %scatter(x,y,sz,c) c控制颜色，其颜色可直接赋值 r、 g 、k、 b等，也可以用矩阵来设置对应x、y点对应圆圈的颜色分布

clc;
clear;
A=magic(6)
x=A(:,1);
y=A(:,2);
z=A(:,3);
s=A(:,4)*15;%映射大小
c=A(:,5);%映射填充颜色
f=A(:,6);%映射线框颜色

figure;
%生成控制散点大小的数值
 s1=floor(s);
 sizes = unique(s1);
%生成颜色
    clos = unique(c);
    cc = parula(length(clos));    
    cc = fliplr(cc')';

 for i=1:length(clos)
      ind = find(c== clos(i));  
      scatter3(x(ind),y(ind),z(ind),s(ind),cc(i,:),'fill');
      legendtext{i} = num2str(clos(i));
      legendtext1{i+1} = num2str(sizes(i));
      hold on;
 end
legend(legendtext);

可以看到，现在图中已经对应了五维数据的可视化，但是散点图大小的图例没有显示出来，这里从【Matlab】散点图之五维数据可视化博主优秀的帖子中，可以获得 legendScatter(TextCell,SizeDim,Factor,LinSpec)函数，用来显示大小图例。

function [hleg,hobj]=legendScatter(TextCell,SizeDim,Factor,LinSpec)
%% LEGENDSCATTER: workaround for R2016a and later for scatter plot legend.
%   This function aims to simplify the creation of a legend for scatter plots.
%   The function will plot a legend on current axis with the right
%   markersize proportion.
%   NB. From version 1.0.5 is added the compatibility with previous MATLAB
%       version.
%
%   Inputs:   - TextCell: a cell array containing the legend-entry text.
%               WARNING: THE FIRST CELL IS THE TITLE !!!
%             - SizeDim: the ''MarkerSize'' dimension for each entry.
%               WARNING: length(SizeDim)==length(TextCell)-1 !!!
%             - Factor: normaling factor for enlarge the marker size in
%                       a linear way. (MarkerSize*sqrt(Factor)
%             - LinSpec: specify the marker-string.
%
%   EXAMPLE: -----------------------------------------------------
%             Factor=1.5;
%             A=[1,1,1;
%                2,2,2;
%                3,3,3;
%                4,4,4;
%                5,5,5;
%                6,6,6;
%                7,7,7;
%                8,8,8;
%                9,9,9;
%                10,10,10];
% 
%             sh=scatter(A(:,1),A(:,2),(A(:,3).^2)*Factor,'ok');
%             %scattersize==MarkerSize*sqrt(Factor)pt)
%             leg=LEGENDSCATTER({'SIZE','1','2','3','4','5', ...
%                 '6','7','8','9','10'},[1:1:10],Factor,'ok');
%             leg.Location='NorthWest'; axis([0,11,0,11])
%            -----------------------------------------------------
%
%   VERSION:1.0.5
%   AUTHOR: Matteo Bagagli - ETH-Zurich // Oct. 2016
%   MAIL:   matteo.bagagli@erdw.ethz.ch
 
%% FAKE PLOTS
hold on
hplt=zeros(length(TextCell),1)';
for ii=1:length(TextCell)
    hplt(ii)=plot(NaN,NaN,LinSpec);
end
hold off
 
%% WORK
[hleg,hobj]=legend(hplt,TextCell,'Units','points');
drawnow % To update the figure and the legend
idx=(length(TextCell)+4):2:length(hobj); % Skip text and TITLE MARKER
%idx=(1:1:length(TextCell));
v=version; 
if str2double(v(1)) >= 9                 % MATLAB v9.0 and higher
    % Title
    hobj(1).FontWeight='bold';
    ActPos=hobj(1).Position;
    hobj(1).Position=[0.5,ActPos(2),ActPos(3)];
    hobj(1).HorizontalAlignment='center';
    hobj(1).FontSize=11;
    hobj(length(TextCell)+2).Marker='none';
    % Body
    for ii=1:length(idx)
        hobj(idx(ii)).MarkerSize=SizeDim(ii)*sqrt(Factor);
    end
else                                     % MATLAB v8 and lower
    % Title
    set(hobj(1),'FontWeight','bold');
    ActPos=get(hobj(1),'Position');
    set(hobj(1),'Position',[5,ActPos(2),ActPos(3)]);
    set(hobj(1),'HorizontalAlignment','center');
    set(hobj(1),'FontSize',11);
    set(hobj(length(TextCell)+2),'Marker','none');
    % Body
    for ii=1:length(idx)
        set(hobj(idx(ii)),'MarkerSize',SizeDim(ii)*sqrt(Factor));
    end   
end % end switch version
 
end % EndMain

利用legendScatter(TextCell,SizeDim,Factor,LinSpec) 函数，我们可以得到：

clc;
clear;
A=magic(6)
x=A(:,1);
y=A(:,2);
z=A(:,3);
s=A(:,4)*15;%映射大小
c=A(:,5);%映射填充颜色
f=A(:,6);%映射线框颜色

figure;
%生成控制散点大小的数值
 s1=floor(s);
 sizes = unique(s1);
%生成颜色
    clos = unique(c);
    cc = parula(length(clos));    
    cc = fliplr(cc')';
legendtext1{1}='大小';

 for i=1:length(clos)
      ind = find(c== clos(i));  
      scatter3(x(ind),y(ind),z(ind),s(ind),cc(i,:),'fill');
      legendtext{i} = num2str(clos(i));
      legendtext1{i+1} = num2str(sizes(i)/15);
      hold on;
 end
legend(legendtext);
hold on;
Factor=1;
axes('position',get(gca,'position'),'visible','off');
legendScatter(legendtext1,sizes/15,Factor,'ok');

需要注意的是，生成第二的图例之前要加入下面的一行语句，防止上一个图例被覆盖。

axes('position',get(gca,'position'),'visible','off');

step3、六维数据进行可视化

3. 利用散点图的线框颜色映射第六维度数据，调用颜色栏：

 %绘制线框颜色
    scatter3(x,y,z,s,c,'linewidth',2)
    colormap(cool);
    colorbar;
    legend(legendtext);

完整代码

clc;
clear;
A=magic(6)
x=A(:,1);
y=A(:,2);
z=A(:,3);
s=A(:,4)*15;%映射大小
c=A(:,5);%映射填充颜色
f=A(:,6);%映射线框颜色

figure;
%生成控制散点大小的数值
 s1=floor(s);
 sizes = unique(s1);
%生成颜色
  clos = unique(c);
  cc = parula(length(clos));    
  cc = fliplr(cc')';
  legendtext1{1}='大小';

 for i=1:length(clos)
      ind = find(c== clos(i));  
      scatter3(x(ind),y(ind),z(ind),s(ind),cc(i,:),'fill');
      legendtext{i} = num2str(clos(i));
      legendtext1{i+1} = num2str(sizes(i)/15);
      hold on;
 end
hold on;
 %绘制线框颜色
scatter3(x,y,z,s,c,'linewidth',2)
title('六维图');     
xlabel('第一维');% x轴名称、字体及大小
ylabel('第二维');% y轴名称、字体及大小
zlabel('第三维');% z轴名称、字体及大小
colormap(cool);
colorbar;
legend(legendtext);
Factor=1;
axes('position',get(gca,'position'),'visible','off');
legendScatter(legendtext1,sizes/15,Factor,'ok');

运行结果如下，为了美观需要对图例进行一些位置的调整。

四、思考

以上就是我自己关于4-7维数据在散点图上的一些可视化原理和分析方案。

• 但是在这里呢，我还想说的就是绘图之前，我们需要仔细思考思考，有没有必要非要在一张图上绘制4-7维度？因为我觉得绘制出来的图只能作为一种示意功能，有可能会造成花里胡哨的感觉（当然这和审美有关系）
• 例如，4维数据可以选择确定某一维数的情况下绘制多张三维图来表达数据的趋势关系，当然这个只是个人的一些思考和建议，具体问题还需要具体分析。

五、参考博客

最后，感谢两位博主的分享：

1. 【Matlab】散点图之五维数据可视化
2. 【matlab】的四维图像数据可视化

☀ 记录自己学习的同时，也希望能对大家有所帮助，欢迎留言交流！