Làm thế nào để sử dụng gradient SVG để hiển thị màu sắc khác nhau tương ứng với kích thước của vùng màu

Question

Tôi đang sử dụng SVG và D3 để tạo biểu đồ thanh và có một câu hỏi liên quan đến làm thế nào để tô màu chúng. Tôi đã tìm kiếm nhiều câu hỏi trên trang web này và những người khác và chưa tìm thấy bất cứ ai có cùng một vấn đề.

Tôi muốn mỗi thanh bắt đầu ở dưới cùng với một màu, (màu vàng, ví dụ) và, khi thanh được cao hơn, dần dần trộn thêm nhiều màu thứ hai, (đỏ, ví dụ), để các thanh ở chiều cao tiềm năng tối đa của chúng sẽ chỉ là màu thứ hai. Trong ví dụ này, các đỉnh của các thanh có một nửa chiều cao tiềm năng của chúng sẽ là màu da cam.

tôi đã có thể viết một hàm để sản xuất, đối với một thanh của bất kỳ chiều cao nhất định, một gradient tuyến tính duy nhất sẽ tô màu cho thanh như mong muốn.

Tuy nhiên, vì biểu đồ này là động và chiều cao của các thanh có thể thay đổi nhiều lần mỗi giây khi dữ liệu được làm mới, tạo và áp dụng gradient mới mỗi lần và cho mỗi thanh chắc chắn không hiệu quả và có thể dẫn đến nghiêm trọng lag trong làm mới các quán bar. (Tôi thừa nhận tôi đã không thực sự cố gắng này với bất cứ điều gì khác hơn là một trường hợp thử nghiệm tĩnh, vì vậy tôi có thể sai về giả định cuối cùng.)

Sử dụng một gradient tĩnh của khóa học mang lại một cái gì đó như thế này, nơi các màu sắc được trộn lẫn theo chiều cao của thanh, không phải là chiều cao của khu vực:

trong kịch bản của tôi mong muốn, tuy nhiên, những quán bar nhỏ nên có rất ít màu đỏ hoặc màu xanh đậm tương ứng.

tôi câu hỏi, cuối cùng, là thế này: có một cách để

1. tạo một gradient đơn được áp dụng cho các khu vực SVG bản thân (dễ)
2. đã nói dốc đeo mặt nạ bằng cách nào đó (dễ)
3. sau đó chọn lọc lột mặt nạ bên dưới hình chữ nhật đại diện cho các quán bar của đồ thị? (???)

Hoặc, có một số kỹ thuật khác mà tôi đang xem không?

Cảm ơn

Answer 1

này là đơn giản để thực hiện nhưng một chút khó khăn để nắm bắt, bạn cần phải xác định rằng các đơn vị gradient là userSpaceOnUse và sau đó xác định các khu vực nơi bạn muốn nó để áp dụng thông qua x1, x2, y1, y2 :

var gradient = svg 
    .append("linearGradient") 
    .attr("y1", minY) 
    .attr("y2", maxY) 
    .attr("x1", "0") 
    .attr("x2", "0") 
    .attr("id", "gradient") 
    .attr("gradientUnits", "userSpaceOnUse") 

gradient 
    .append("stop") 
    .attr("offset", "0") 
    .attr("stop-color", "#ff0") 

gradient 
    .append("stop") 
    .attr("offset", "0.5") 
    .attr("stop-color", "#f00") 

bạn có thể thấy một bản demo ở đây: http://jsfiddle.net/ZCwrx/