我想绘制一幅情节3D图。
我已经使用以下代码绘制了3D绘图图。
var trace1 = {
x: [2.0522699155, 1.60603507656, 3.98979463908, 0.800202189637, 4.16783956636, 2.95313983879, 5.0, 3.41759950759, 4.02288405655, 2.94010152597, 3.63034369928, 3.16032847173, 2.84232962045, 3.64970293361, 2.66786174731, 1.03749190769, 2.17855088691, 0.942208241258, 2.78224452996, 3.30213001295, 3.22296192645, 2.472764363, 3.00401653801, 2.63945959172, 1.9266212172],
// y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
y : [3.80802778444, 3.24303183309, 3.90459129274, 1.48507886338, 5.0, 3.21697257561, 0.0, 3.59728336393, 3.48023605288, 4.04693568382, 1.93203256347, 1.94519341179, 2.93007560776, 4.57633585255, 4.09858787614, 1.06912858064, 3.04012649902, 2.20718355604, 2.38150971107, 2.12206089387, 1.92348823442, 2.53393341278, 3.75945720171, 2.43140112455, 2.44696845761],
// z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
z : [3.97479986154, 2.20251587247, 1.91885091958, 3.06216739476, 3.37245559999, 2.23122564522, 2.35036121228, 2.62375347613, 1.71093693468, 1.23114425973, 1.67539170543, 0.807655555521, 4.26051739287, 2.32537114197, 3.5798240995, 2.15458204352, 2.75668482729, 1.17333051934, 2.41542282588, 1.87953707438, 2.57418967735, 1.83480174146, 1.65767515867, 4.02426576613, 3.67825997338],
text: ["size:4", "size:9", "size:6", "size:5", "size:1", "size:1", "size:5", "size:6", "size:10", "size:1", "size:11", "size:5", "size:11", "size:8", "size:4", "size:2", "size:9",
"size:11", "size:9", "size:9", "size:4", "size:2", "size:7", "size:6", "size:3", "size:4", "size:3", "size:5", "size:10", "size:9", "size:3", "size:7", "size:5", "size:5",
"size:10", "size:4", "size:3", "size:1", "size:7", "size:11", "size:5", "size:3", "size:4"],
mode: 'markers',
marker: {
//color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
color : "blue",
size: [3, 1, 11, 9, 4, 9, 5, 8, 2, 3, 11, 9, 6, 2, 1, 10, 3, 9, 8, 1, 5, 10, 4, 10, 3],
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.9
},
type: 'scatter3d',
name : 'category1',
title: 'title1'
};
var trace2= {
x: [-0.100387678599, -0.841098362432, -0.086900337279, -0.418153015989, -0.197122458852, 0.0391933774019, -0.759329967599, -1.29266640992, 0.950624526622, 1.52725553555, 2.25231901948, 1.84936962902, 0.833618714205, 2.42998331172, 1.73583322891, 3.19694965552, -0.909512478385, 0.983932265051, -0.992449424459, 2.349425425, -1.60550784046, 2.68216122416, 2.22665169157, -0.775707830008, 0.569030921894, 0.310849282625, 2.39935206131, -1.66045702411, 3.76747878057, 3.05333459172, -3.35932368186, 3.43730482552, -3.07611001807, -0.842850343527, 3.50008556345, 0.165085596719, -0.339561268287, -1.74747448536, 3.56148886503, 1.8353330132, -1.90428086596, -0.912688959871, -2.37825362991],
y: [0.14252201109, 0.745253687488, 1.16250599725, 2.47176489125, -1.69476239552, -0.48991323684, 1.84409425219, 0.367526589193, -0.328695718905, 2.14081057301, 2.03064486378, -0.904917704389, -0.736099553953, -0.479945186555, 1.05076717167, 2.31045246862, 3.56214860102, -1.24356092573, 2.81251569105, 0.0354567947856, -0.764543463049, -0.463534094967, 0.121969881263, 3.10372387334, -3.07803266701, 3.94722158567, -2.3010720086, 0.522405164718, 2.09399114056, -0.206807957036, -0.102937553009, 1.93741482093, 2.13939929808, 2.31731711195, 2.04266966673, -2.83044062307, -1.29617222855, -0.0602624529294, -0.288215534329, 3.93478999833, 0.185708369263, -0.495944639256, -0.147527715708],
z: [-0.0850216981743, 0.0772495602215, 0.822100957178, 0.234493023372, 1.32486987031, 1.35806542101, -0.737286816662, -0.563373179749, -0.0551875444142, -0.104727172455, 0.653748756692, 1.99993870003, 2.1181425229, 1.5259703198, -0.621228886025, 0.409865697587, 0.65584453111, 2.11519050918, 0.311775993159, 1.78321165695, 0.472856801961, 0.918408722859, 3.36357867891, 0.253121323865, 2.00494245448, 0.725818892026, -0.791414427718, 0.339800250917, 1.43633692227, -0.644759286391, 1.06252011487, -0.884604393579, 0.590838097803, -1.77517601605, 1.03386775027, -0.451081715245, 2.89900356475, 1.50485074307, -0.199970622936, 2.71850157406, -2.37896493905, -1.03295302469, 1.42318432732],
text: ["size:4", "size:9", "size:6", "size:5", "size:1", "size:1", "size:5", "size:6", "size:10", "size:1", "size:11", "size:5", "size:11", "size:8", "size:4", "size:2", "size:9",
"size:11", "size:9", "size:9", "size:4", "size:2", "size:7", "size:6", "size:3", "size:4", "size:3", "size:5", "size:10", "size:9", "size:3", "size:7", "size:5", "size:5",
"size:10", "size:4", "size:3", "size:1", "size:7", "size:11", "size:5", "size:3", "size:4"],
mode: 'markers',
marker: {
color: ['blue', 'yellow', 'blue', 'blue', 'green', 'green', 'red', 'blue', 'blue', 'blue', 'red', 'blue', 'red', 'green', 'blue', 'green', 'green', 'blue', 'green', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'green', 'yellow', 'yellow', 'green', 'yellow', 'green', 'red', 'blue', 'blue', 'red', 'blue', 'yellow', 'red', 'green', 'blue', 'green', 'red', 'red'],
// color : "green",
size: [ 4, 9, 6, 5, 1, 1, 5, 6, 10, 1, 11, 5, 11, 8, 4, 2, 9,
11, 9, 9, 4, 2, 7, 6, 3, 4, 3, 5, 10, 9, 3, 7, 5, 5,
10, 4, 3, 1, 7, 11, 5, 3, 4],
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.9
},
type: 'scatter3d',
name: 'category2',
title:'title2',
};
var data = [trace1,trace2];
var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0
}, showlegend : true};
Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );
现在我还有另外一项任务要做。 那就是形成一些数据的图表。 数据如下：
var scatter_data = [{
"product_id": 1,
"color": "#ff0000",
"text": "Size :14",
"y": 4,
"x": 6,
"z": 3,
"size": 14
}, {
"product_id": 2,
"color": "#FFFFFF",
"text": "Size :38",
"y": 5,
"x": 4,
"z": 4,
"size": 38
}, {
"product_id": 3,
"color": "#00ff00",
"text": "Size :20",
"y": 3,
"x": 5,
"z": 4,
"size": 20
}, {
"product_id": 4,
"color": "#FFFFFF",
"text": "Size :31",
"y": 6,
"x": 0,
"z": 1,
"size": 31
}, {
"product_id": 5,
"color": "#00ff00",
"text": "Size :20",
"y": 0,
"x": 5,
"z": 1,
"size": 20
}, {
"product_id": 6,
"color": "#ff0000",
"text": "Size :18",
"y": 6,
"x": 1,
"z": 5,
"size": 18
}, {
"product_id": 7,
"color": "#FFa500",
"text": "Size :15",
"y": 0,
"x": 4,
"z": 2,
"size": 15
}, {
"product_id": 8,
"color": "#00ff00",
"text": "Size :13",
"y": 2,
"x": 1,
"z": 1,
"size": 13
}, {
"product_id": 9,
"color": "#FFFFFF",
"text": "Size :11",
"y": 3,
"x": 0,
"z": 1,
"size": 11
}, {
"product_id": 10,
"color": "#FFa500",
"text": "Size :32",
"y": 4,
"x": 2,
"z": 2,
"size": 32
}, {
"product_id": 11,
"color": "#0000ff",
"text": "Size :30",
"y": 1,
"x": 0,
"z": 1,
"size": 30
}], {
"product_id": 12,
"color": "#0000ff",
"text": "Size :39",
"y": 3,
"x": 4,
"z": 3,
"size": 39
}]
所以我现在想要使用这些数据来生成多条迹线。 每个对象都是一个跟踪
我希望我现在很清楚。
答案 0 :(得分：1)
这完全取决于你所处的范围。如果你在窗口范围内（你的this是window对象），那么声明
var a = 'hello'
与
相同window.a = 'hello'
与
相同this['a'] = 'hello'
答案 1 :(得分：-1)
所以，在所有评论者的帮助下，我终于找到了自己的答案。
这是我使用的代码。
trace = [];
data = [];
$.each(scatter_data, function(index, value){
// console.log("here"+value);
index ++;
trace[index] = {
x : [value.x],
y: [value.y],
z:[value.z],
text:["Size: "+value.size],
mode : 'markers',
marker : {
color : [value.color],
size : [value.size],
symbol : 'circle',
line: {
color : 'rgb(204,204,204)',
width:1
},
opacity:0.9,
},
type: 'scatter3d',
name : 'category'+index,
title: 'title'+index
};
// console.log(trace[index]);
data.push(trace[index]);
});
// var data = [trace[1],trace[2],trace[3]];
var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0
}, showlegend : true};
Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );
谢谢！