1

Estoy haciendo un sorteo usando JSON, CSS y HTML, en el que tengo un array JSON así:

var data = [
             {
               "label":"DELFIN",  
               "value":0,
               "name":"1",
               "question":"DELFIN",
               "png":"png/delfin.png",
               "ogg":"ogg/delfin.ogg"
             }
           ];

Estoy ubicando en un sitio, en mi página los elementos retornados usando:

        .text( function(d, i) {
            return data[i].value; // + '\n' +data[i].value;  se concateno el return para poder agregar mas cosas a la Ruleta
        });

Mi duda es que cuando cambio el valor retornado por png, me trae el texto "png/delfin.png" en mi HTML. ¿Cómo puedo hacer para no traer el texto sino una imagen para mostrarla donde actualmente muestro el value del array?

Éste es el código HTML:

<table id="listaderesultados" width="50%" align="center" cellpadding="1" cellspacing="0" bordercolor="#006699" class="decotablas"> 
  <tbody>
    <tr align="center" bgcolor="#f7f7f7" class="titulos_tablas"> 
      <td>
        <strong>RESULTADOS</strong>
      </td> 
    </tr> 
    <tr align="center" class="textos_reporte"> 
      <td id="question">
      </td> 
    </tr> 
  </tbody>
</table>
5
  • ¿Podríamos ver el HTML donde se tendría que mostrar la imagen? Commented el 28 ene. 2018 a las 22:23
  • 1
    Ponlo en la pregunta mejor para que quede mucho más claro a futuros lectores. Tienes un botón de editar justo debajo de la msima. Commented el 28 ene. 2018 a las 22:30
  • voy a editar la pregunta en un momento para que se me entienda mejor.
    – Juan Ortiz
    Commented el 28 ene. 2018 a las 22:31
  • @JuanOrtiz Me imagino que esto es una continuación de la otra pregunta en la que hablamos. Deberías indicar que estás usando d3.js y no jQuery (porque los usuarios se pueden confundir). Te recomiendo que leas Cómo preguntar y cómo crear un ejemplo mínimo verificable para mejorar tus preguntas. Sería ideal si en lugar de poner el JS, HTML y JSON por separado, los pusieras todos juntos en un snippet donde se pudiera ver el problema (un ejemplo mínimo verificable).
    – Alvaro Montoro
    Commented el 29 ene. 2018 a las 3:01
  • @alvaroMontoro. ya estoy leyendo esta info, no me habia percatado de esto.
    – Juan Ortiz
    Commented el 30 ene. 2018 a las 14:27

1 respuesta 1

1

Como te ponía en un comentario en tu otra pregunta, lo que quieres se puede hacer agregando un img y asignándole la fuente (algo similar al div que se iba a insertar entonces).

Si usas text entonces lo que vas a hacer es añadir la fuente de la imagen como texto pero no como imagen. Debes agregar la imagen primero (con append) y cambiar su atributo src después (con attr). Algo como esto:

.append("img")            // para agregar la imagen
.attr("src", data[0].png) // para asignar el src al valor de data[0].png

Aquí puedes ver un ejemplo funcionando:

var data = [{
  "label": "DELFIN",
  "value": 0,
  "name": "1",
  "question": "DELFIN",
  "png": "https://lorempixel.com/100/100/animals", //"png/delfin.png",
  "ogg": "ogg/delfin.ogg"
}];

d3.select("#ganadores")
  .append("div")
  .text(data[0].question)
  .append("img")
  .attr('src', data[0].png);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<table id="listadeganadores" border="1">
  <tr>
    <td colspan="5" align="center">RESULTADOS</td>
  </tr>
  <tr>
    <!--   en estos td van los resultados    -->
    <td id="ganadores"></td>
  </tr>
</table>

2
  • no me esta funcionando @AlvaroMontoro. la cosa es que con lo del texto si pude ubicar el contenido del texto , mas no la imagen como tal . yo estoy usando el return para ubicar las imagenes. habria una forma de cambiar esta funcion para que me retorne las imagenes en vez del texto ? attr("text-anchor", "end") .text( function(d, i) { return data[i].value; });
    – Juan Ortiz
    Commented el 30 ene. 2018 a las 15:14
  • @JuanOrtiz edita la pregunta para añadir esa información, así como un ejemplo mínimo verificable del problema. Es la primera vez que mencionas lo del text-anchor y no sé a qué código te refieres o dónde va ese código.
    – Alvaro Montoro
    Commented el 30 ene. 2018 a las 15:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.