Afficher des images à partir d'un csv avec d3

Question

Je suis très novice en matière de javascript, de d3 et de projet polymère.

J'ai un fichier csv contenant des informations sur les images, j'ai analysé le fichier et créé un tableau qui ne contient que l'URL de l'image. Maintenant, je veux afficher ces images sur mon projet polymère. Cependant, lorsque j'essaie d'utiliser le tableau, rien ne se passe.

d3.csv("./images2.csv",function (data) {
 var URL = data.map(function(d) {return d.imageUrl});
 var urlArray = [];
 urlArray.push(URL);

 //display 1st image?
 document.write('<img src=" + urlArray[0] + "/>');
}); 

Je ne sais pas si je n'ai pas la bonne syntaxe ou si j'aborde la question de la mauvaise manière, mais je n'ai rien trouvé d'utile. Toute aide ou conseil serait apprécié.

Answer 1

Cela ne fonctionnera pas comme vous l'avez essayé car vous mettez un tableau dans un tableau (en disant cela sans voir votre fichier csv) puis vous essayez d'appeler l'extérieur qui retourne un tableau.

En supposant que URL est un tableau d'URLs, ces lignes sont inutiles et vous pouvez les supprimer : var urlArray = []; urlArray.push(URL);

Essayez alors document.write('<img src=" + URL[0] + "/>');

Code complet :

d3.csv("./images2.csv",function (data) {
 var URL = data.map(function(d) {return d.imageUrl});
 //display 1st image?
 document.write('<img src=" + URL[0] + "/>');
});

Answer 2

Puisque vous utilisez Polymer, une autre approche pour afficher toutes les images pourrait être de boucler sur votre tableau en utilisant le dom-repeat qui est fourni avec l'élément de modèle Polymers. En fonction de votre version de Polymer, vous devrez peut-être l'ajuster un peu, mais c'est ainsi que je procédais auparavant.

La propriété :

iframeLinks: {
  type: Array,
  value: function(){
    return []
  }
},

La fonction :

d3.csv("./images2.csv",function (data) {
  this.urlArray = data.map(function(d) {return d.imageUrl});
}.bind(this)); 

Le HTML :

<template is="dom-repeat" items="{{urlArray}}">
  <img src$="[[item]]"></img>
</template>