2013-06-15 42 views
7

Giống như tiêu đề cho biết: với D3.js, có thể chuyển đổi màu của gradient tuyến tính không?d3.js: Chuyển đổi màu sắc trong một gradient tuyến tính SVG?

Ví dụ, nếu tôi có gradient này:

var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
    .attr("id", "gradient") 
    .attr("x1", "0%") 
    .attr("y1", "0%") 
    .attr("x2", "100%") 
    .attr("y2", "0%") 
    .attr("spreadMethod", "pad"); 
gradient.append("svg:stop") 
    .attr("offset", "0%") 
    .attr("stop-color", "yellow") 
    .attr("stop-opacity", 0.6); 
gradient.append("svg:stop") 
    .attr("offset", "100%") 
    .attr("stop-color", "red") 
    .attr("stop-opacity", 0.6); 
svg.append("svg:rect") 
    .attr("width", width) 
    .attr("height", 8) 
    .style("fill", "url(#gradient)"); 

Tôi có thể sau đó chuyển nó trở thành một gradient đi từ màu xanh sang màu đỏ, chứ không phải màu vàng sang màu đỏ?

Trả lời

6

Có - thay đổi định nghĩa của độ dốc không khác gì thay đổi vị trí của vòng tròn hoặc thứ gì đó tương tự như xa như D3. Bạn có thể làm những gì bạn muốn ví dụ với các mã sau đây.

gradient.select("stop") 
     .transition() 
     .attr("stop-color", "blue"); 
Các vấn đề liên quan