D3 : 2D 배열 데이터로 구동되는 그레이 스케일 이미지 디스플레이

d3을 사용하여 그레이 스케일 이미지, 즉 픽셀 강도의 2 차원 배열을 표시하는 방법을 아는 사람이 있습니까? 어디서나 예제를 찾을 수없는 것 같습니다. 까다로울 수 있습니까? 모든 도움말/링크/포인터 감사!D3 : 2D 배열 데이터로 구동되는 그레이 스케일 이미지 디스플레이

출처

2012-08-07 reptilicus

히트 맵과 같은 소리 –

그래, 그 라인을 따라 뭔가. 지금까지 d3 히트 맵에 대한 몇 가지 링크가 있지만 평범한 이미지는 없습니다. 나는 약간 놀랐다. . . – reptilicus

"일반 이미지"는 무엇을 의미합니까? –

이미지를 표시하려면 image element과 "xlink : href"속성을 사용하십시오. 예를 들어 : 당신은 그레이 스케일 이미지를 색상 화하려면

svg.append("image") 
    .attr("xlink:href", "my.png") 
    .attr("width", 960) 
    .attr("height", 500);

후 발산 컬러 스케일을 만들 분위수를 사용하여이 colorized heightmap example을보고, 더 나은 인식에 대한 HCL의 보간 :

데이터를 다른 표현으로 표현한 경우 유용 할 수 있습니다.

는 마지막으로, 당신은 각각의 샘플이 아닌 미리 계산 된 2D 히스토그램이있는 경우, 당신은 위의 히트 맵 중 하나를 생성하기 전에 빈에 데이터를해야합니다.

출처

2012-08-07 23:43:56 mbostock

정보를 제공해 주셔서 감사합니다. 하이트 맵은 제가 목표로 삼은 좋은 예입니다. 기본적으로 나는 일하고있는 2 차원 파이썬 배열을 가지고있다. d3 Michael을 제공해 주셔서 감사합니다! – reptilicus

질문 하나, 왜 http://bl.ocks.org/3074470의 이미지가 부드럽고 픽셀 화되지 않은 것입니까? – reptilicus

질문에 답변 한 경우이 질문에 동의로 표시하십시오. 두 번째 질문의 경우 브라우저가 비 고유 해상도로 표시 될 때 다른 모든 이미지와 마찬가지로 캔버스를 다시 샘플링하기 때문에 이미지가 매끄 럽습니다. [image-rendering] (https://developer.mozilla.org/en-US/docs/CSS/Image-rendering) 스타일 속성을 통해이 동작을 제어 할 수 있습니다. – mbostock

D3 : 2D 배열 데이터로 구동되는 그레이 스케일 이미지 디스플레이

답변

관련 문제