JavaScriptで変数名を生成

Question

私はプロットした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 }); 

もう1つのタスクがあります。 それはいくつかのデータのプロットグラフを形成することです。次のように データは次のとおりです。

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 
}] 

だから私は今、複数のトレースを生成するには、このデータを使用します。 各オブジェクトはトレースです

私は今はっきりしています。

Answer 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 }); 

ありがとう！

Answer 2

それはすべてあなたが何であるかの範囲に依存します。あなたは、その後

var a = 'hello' 

を宣言し、（あなたのthisがwindowオブジェクトである）ウィンドウのスコープにある

window.a = 'hello' 

と同じと同じである場合as

this['a'] = 'hello' 

私は、変数を動的に作成しないでください。代わりに、arrayを使用して値を正しいインデックスに格納します。