[JAVA] Quel est l'attribut de domaine écrit dans la disposition de Plotly?

A ce sujet, la documentation anglaise ne contient que du code et des résultats d'exécution, C'était un peu difficile à comprendre, je vais donc laisser l'explication.

Comment utiliser l'attribut de domaine
  1. Spécification de la position lorsque vous souhaitez placer plusieurs graphiques sur une image
  2. (Partage de l'axe des x ou de l'axe des y) Spécifiez la position lorsque vous souhaitez superposer plusieurs données dans le même graphique. Cela nécessite de définir et d'ajuster des axes en plus du domaine, de sorte que les explications sont omises.
  3. Faites-moi savoir si vous avez d'autres idées à utiliser à de tels moments!

Document de référence https://plotly.com/javascript/subplots/#multiple-custom-sized-subplots

Il s'agit d'un document JavaScript, mais vous pouvez l'utiliser comme référence lors de l'écriture en Python.

Dans cet élément plusieurs sous-graphiques de taille personnalisée </ b> Lors de l'affichage d'une pluralité de graphiques dans une zone donnée de l'utilisation mentionnée ci-dessus 1. La disposition et la taille </ b> sont définies.

Vous pouvez vérifier immédiatement le dessin du code JS et HTML avec CodePen, alors essayez-le.

Code réel (JS) 
var plot1 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot1)'
};

var plot2 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot2)',
  xaxis: 'x2',
  yaxis: 'y2'
};

var plot3 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot3)',
  xaxis: 'x3',
  yaxis: 'y3'
};

var data = [plot1, plot2, plot3];

var layout = {
  title: 'Personnalisez la taille de plusieurs tracés',
  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },
  xaxis2: {
    domain: [0.55, 1],
    anchor: 'y2'
  },
  yaxis2: {
    domain: [0.55, 1],
    anchor: 'x2'
  },
  xaxis3: {
    domain: [0.75, 1],
    anchor: 'y3'
  },
  yaxis3: {
    domain: [0, 0.45],
    anchor: 'x3'
  },
};

Plotly.newPlot('myDiv', data, layout);

Code réel (HTML) ```
```

Résultat du dessin C'est arrangé comme ça. ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462013/2a4bcb59-2fcb-8e83-5306-06f652f73956.png)

Explication de la valeur spécifiée par domaine domaine signifie domaine. Vous pouvez voir que les deux xaxis (axe x): et yaxis (axe y): ont l'attribut domain. Définissez la plage de coordonnées dans chacun de ces domaines.

Description dans la mise en page ci-dessous

  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },

Lorsque le plus long de chacun des horizontaux (x) et vertical (y) de la zone de dessin donnée est 1 </ b> Spécifiez sous forme de valeur fractionnaire.

Dans l'exemple plot1 ci-dessus, Le domaine axe x: [0, 0,45] </ b> est compris entre 0 et 0,45 </ b> Le domaine de l'axe y: [0, 1] </ b> est supposé être compris entre 0 et 1 </ b>. スクリーンショット 2020-11-08 7.54.13.png

  • La taille de la fenêtre dessinée ayant changé, cette image semble avoir été légèrement étirée horizontalement.

Au fait Quand j'ai regardé la documentation pour la première fois, des nombres comme 0,55 et 0,75 étaient déroutants, je l'ai donc réglé sur 0,5 et 1. Ensuite, comme indiqué ci-dessous, la fin du graphique et le début d'un autre axe sont couverts. Il semble qu'il soit normal de laisser environ 10% entre les graphiques.

image.png

Enfin Certaines personnes l'ont peut-être compris en regardant simplement le code et les résultats de dessin, À première vue, j'étais confus parce que [0,55, 1] ressemblait à un nombre magique. Les bases des mathématiques sont importantes!

Remarque: si vous avez des doutes sur la manière de gérer plusieurs graphiques, consultez ici dans la documentation JavaScript de Plotly [Try It On Code Pen]. Il est recommandé de vérifier le fonctionnement.

Recommended Posts