1. Zuhause
  2. Frage und Antwort
  3. Erzeuge Variablennamen in Javascript

Erzeuge Variablennamen in Javascript

2016-07-14 5 views
-2

Ich möchte eine plotly 3D-Grafik plotten.Erzeuge Variablennamen in Javascript

Ich habe bereits eine 3D Plotly Graph mit dem folgenden Code geplottet.

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

Jetzt habe ich eine andere Aufgabe zu erledigen. und das ist ein Plot-Diagramm einiger Daten zu bilden. Die Daten sind wie folgt:

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

Also diese Daten Ich möchte jetzt verwenden, um mehrere Spuren zu erzeugen. Jedes Objekt ist eine Spur

Ich hoffe, ich bin jetzt klar.

Quelle

2016-07-14 Rudresh Ajgaonkar

+6

Das macht überhaupt keinen Sinn. Geben Sie ein minimales Snippet des entsprechenden Codes ein – Amit

+3

Nein. Ich bin mir ziemlich sicher, dass die Bananenfürsten beschlossen haben, dass die Fanatikerladung um Mitternacht laufen würde. –

+3

FWIW, nicht 'trace1' und' trace2'. Verwenden Sie stattdessen 'trace [1]' und 'trace [2]'. –

Antwort

-1

So konnte ich endlich dank der Hilfe von allen Kommentatoren meine eigene Antwort finden.

Hier ist der Code, den ich verwendet habe.

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

Vielen Dank!

Quelle

2016-07-15 21:09:03

+1

Verwenden Sie '$ .each()' nicht. Verwenden Sie 'scatter_data.forEach (function (value) {...});' Verwenden Sie auch eine anständige IDE für Einzüge. Es ist schrecklich zu lesen. Noch eine Sache, Sie brauchen nicht Index zu verwenden. Sie können 'index' entfernen und einfach ein Objekt' var trace = {} 'und' data.push (trace); ' – Highmastdon

+0

Vielen Dank für das Feedback @Highmastdon. Geschätzt. –

+0

http://api.jquery.com/jquery.each/ –

1

Es hängt alles davon ab, welche Möglichkeiten Sie sind in. Wenn Sie auf dem Fenster Umfang sind (Ihr this ist window Objekt), dann

var a = 'hello'

erklärt ist die gleiche wie

window.a = 'hello'

und gleiche wie

this['a'] = 'hello'

Ich stimme jedoch zu, dass Sie nicht sollten t erstellen Sie Ihre Variablen dynamisch. Verwenden Sie stattdessen Array, um die Werte im richtigen Index zu speichern.

Quelle

2016-07-14 21:41:15 nuway

 Verwandte Themen

  • Keine verwandten Themen^_^