d3.js Biểu đồ Sankey: hình chữ nhật tô màu

Question

Vì vậy, tôi đang chơi xung quanh với sơ đồ Sankey d3.js.

Trong this example (ảnh trên) màu được định nghĩa sử dụng

var color = d3.scale.category20(); 

Đối với mỗi nút có một hình chữ nhật, và hình chữ nhật được làm đầy bằng cách thay đổi phong cách:

.style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
}) 

Tôi đang tìm các đề xuất về cách sử dụng các màu tùy chỉnh. Nếu tôi muốn sử dụng chỉ nói 6 màu, nhưng có các màu hình chữ nhật của nút được chọn dựa trên một giá trị trong tệp .json.

Ví dụ: giả sử tôi muốn hiển thị biểu đồ các đội bóng trong NFL. Mỗi màu sắc đại diện cho bộ phận mà các đội chơi. Vì vậy, nếu họ chuyển sang một bộ phận khác, màu sắc sẽ thay đổi. Và các nút được tạo cho mỗi mùa. Một cái gì đó dọc theo những dòng đó.

Vậy là nó có thể chạy

node.append("rect") 
    .attr("height", function(d) { return d.dy; }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function(d) { 
     return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("stroke", function(d) { 
     return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function(d) { return d.name + "\n" + format(d.value); }); 

với màu sắc dựa trên một giá trị trong file json? Tôi đang suy nghĩ chỉ là một tuyên bố nếu, nhưng là có một cách dễ dàng hơn? Tôi có thể chỉ bao gồm mã màu hex trong json không?

Answer 1

Có vẻ như bạn muốn đưa màu vào JSON trong trường hợp này. Bạn có thể bao gồm nó theo bất kỳ cách nào mà trình duyệt nhận ra, ví dụ: dưới dạng tên ("trắng") hoặc hex ("#fff"). Xem SVG spec để có danh sách đầy đủ các thông số màu được hỗ trợ.

Answer 2

Hoặc, bạn có thể ánh xạ màu sắc cho bộ phận một cách rõ ràng với thang đo thứ tự d3 như được đề cập trong documentation. Xem Colorbrewer ở phía dưới.

var color = d3.scale.ordinal() 
    .domain(["foo", "bar", "baz"]) 
    .range(["#fff","#000","#333"]); 

và sau đó

.attr("fill", function(d) { return color(d.division); }); 

Answer 3

Thay const color = d3.scaleOrdinal(d3.schemeCategory20); với:

const color = d3.scaleOrdinal() 
.domain(["Crude oil","Natural gas",...]) 
.range(["#FD3E35","#FFCB06",...]); 

Và ở lại với:

.style('fill', (d,i) => { 
    d.color = color(d.name.replace(/ .*/, '')); 
    return d.color;})