Кто-нибудь знает, как отображать изображение в шкале серого, т.е. двухмерный массив интенсивностей пикселей, используя d3? Кажется, я не могу найти никаких примеров этого, это будет сложно? Любая помощь/ссылки/указатели оценены!
D3: отображение изображений в оттенках серого, управляемое данными 2D-массива
Ответ 1
Если вам просто нужно отобразить изображение, используйте элемент изображения и атрибут "xlink: href". Например:
svg.append("image")
.attr("xlink:href", "my.png")
.attr("width", 960)
.attr("height", 500);
Если вы хотите раскрасить изображение в оттенках серого, посмотрите на этот цветной пример карты высот, в котором используются квантили, чтобы создать расходящуюся цветовую шкалу, и с помощью Интерпретация HCL для лучшего восприятия:
Если у вас есть данные в другом представлении, эти примеры могут быть полезными:
- тепловая карта из CSV с использованием элементов SVG rect
- тепловая карта от JSON с использованием Canvas
Наконец, если у вас есть отдельные образцы, а не предварительно вычисленная 2D-гистограмма, вам нужно будет вынуть данные перед созданием одного из вышеуказанных карт.