반응형
d3.scale.category10 ()에 해당하는 d3.js v4.0은 무엇입니까?
Interactive Web Visualization 책으로 d3를 배우려고하는데 4.0 버전에서는 많은 변화가있었습니다. 내가 정말로 알아낼 수없는 한 가지는 d3.scale.category10 ()에 상응하는 것이 있는지 여부입니다. 새 버전에 이와 비슷한 것이 있습니까? 아니면 math.random을 사용하고 직접 코드를 작성해야합니까?
대신에
d3.scale.category10()
사용하다
d3.scaleOrdinal(d3.schemeCategory10);
다음과 같은 색상 스케일을 만듭니다.
var color = d3.scaleOrdinal(d3.schemeCategory10);
V3에서와 같은 코드에서 다음과 같은 색상을 사용하십시오.
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))
여기에서 참조
여기에 작업 코드
간단한 해결책은 d3.js 버전 -4에서 다음과 같은 색상 스케일을 사용하는 것입니다.
var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;
colorScale_1, colorScale_2, colorScale_3, colorScale_4는 서로 다른 색상의 배열입니다. 따라서 서로 다른 인덱스를 사용하여 모양을 채울 수 있습니다. 예를 들면
svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])
참고로 여기를보십시오 : http://bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4
도움이되기를 바랍니다.
반응형
'IT TIP' 카테고리의 다른 글
git-tf와 git-tfs의 차이점은 무엇입니까? (0) | 2020.10.29 |
---|---|
Chrome 확장 프로그램 : 백그라운드에서 콘텐츠 스크립트로의 sendMessage가 작동하지 않음 (0) | 2020.10.29 |
왜 이것이 기본 생성자없이 컴파일되지 않습니까? (0) | 2020.10.29 |
Android 에뮬레이터 (qemu-system-i386.exe)의 높은 CPU 사용량 (0) | 2020.10.28 |
C #에서 Exception 개체를 직렬화하는 방법은 무엇입니까? (0) | 2020.10.28 |