¿Alguien sabe cómo mostrar una imagen en escala de grises, es decir, una matriz bidimensional de intensidades de píxeles, utilizando d3? Parece que no puedo encontrar ningún ejemplo en ninguna parte, ¿será complicado? Cualquier ayuda/enlaces/consejos apreciados!D3: visualización de la imagen en escala de grises impulsada por datos de matriz 2D
Si solo desea mostrar una imagen, use el image element y el atributo "xlink: href". Por ejemplo:
svg.append("image")
.attr("xlink:href", "my.png")
.attr("width", 960)
.attr("height", 500);
Si desea colorear una imagen en escala de grises, a continuación, ver este colorized heightmap example que utiliza cuantiles para crear una escala de colores divergentes, y con HCL interpolación para una mejor percepción:
Si tiene sus datos en alguna otra representación, estos ejemplos pueden ser útiles:
Por último, si usted tiene muestras individuales en lugar de un histograma 2D previamente calculado, que necesitará para bin los datos antes de generar uno de los mapas de calor anteriores.
Muy bien, gracias por la información. El mapa de alturas es un buen ejemplo de lo que estaba apuntando gor. Básicamente tengo una matriz python 2-d con la que estoy trabajando. Gracias por proporcionar d3 Michael! – reptilicus
Una pregunta, ¿por qué la imagen en http://bl.ocks.org/3074470 es suave y no está demasiado pixelada? – reptilicus
Marque esta pregunta como aceptada si he respondido su pregunta. Para su segunda pregunta, la imagen es fluida porque el navegador vuelve a muestrear el lienzo (como cualquier otra imagen) cuando se muestra con una resolución no nativa. Es posible que pueda controlar este comportamiento a través de la propiedad de estilo [image-rendering] (https://developer.mozilla.org/en-US/docs/CSS/Image-rendering). – mbostock
Suena como un mapa de calor –
Sí, algo parecido. Veo algunos enlaces a d3 heatmaps, sin embargo, no hay imágenes simples hasta ahora. Estoy un poco sorprendido. . . – reptilicus
¿Qué quiere decir con "imagen simple"? –