d3.scale.category10 ()에 해당하는 d3.js v4.0은 무엇입니까?

Interactive Web Visualization 책으로 d3를 배우려고하는데 4.0 버전에서는 많은 변화가있었습니다. 내가 정말로 알아낼 수없는 한 가지는 d3.scale.category10 ()에 상응하는 것이 있는지 여부로 색상에 쉽게 매핑 할 수 있습니다. 새 버전에 이와 비슷한 것이 있습니까? 아니면 math.random을 사용하고 직접 코드를 작성해야합니까?

d3.js

— 익명
소스

답변:

143

대신에

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))

여기에서 읽으 십시오

여기 참조

여기에 작업 코드

— 시릴 셰리 안
소스

감사! 변경 문서를 스크롤하면서 마침내 설명을 찾았습니다.

— anonygrits jul.

color()작업 코드에서 어떤 숫자를 제공하든 출력은 항상 파란색과 주황색입니다. 예상되는 동작입니까? 보라색을 원하면?

— dbj44

이것은 내가 기대했던 것에 대한 해결책 인 것 같습니다.color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`작업 코드에서 출력은 항상 파란색과 주황색입니다. 예상되는 동작입니까?`예상되지 않습니다. 예상되지 않습니다. 여기에 녹색이 표시됩니다. plnkr.co/edit/2DzxaDg1SjidDkz5v2P4?p=preview

— Cyril Cherian

간단한 해결책은 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

도움이되기를 바랍니다.

— Shwetabharti
소스