d3 заполнение области с градиентом

Question

Я хочу заполнить область этой линейной диаграммы градиентом, так что нижняя часть градиента прозрачна, а верхняя часть области заполнена черным цветом. Это возможно?

Все мои поисковые запросы Google вызывают такие диаграммы, как: http://bl.ocks.org/d3noob/4433087 - Я не хочу, чтобы градиент был основан на значениях, в этом примере я бы хотел, чтобы красный был поверх вершины области, а не только когда значение достигает%.

var entries = [{"date":"2016-01-06","value":15},{"date":"2015-11-17","value":15.4},{"date":"2015-11-11","value":16.5},{"date":"2015-09-24","value":15.1},{"date":"2015-08-22","value":15},{"date":"2015-08-12","value":15},{"date":"2015-07-30","value":14.6},{"date":"2015-07-19","value":14.8},{"date":"2015-07-18","value":14.9},{"date":"2015-07-12","value":14.9},{"date":"2015-07-08","value":14.9},{"date":"2015-06-29","value":14.3},{"date":"2015-06-21","value":14.5},{"date":"2015-06-18","value":14.7},{"date":"2015-06-09","value":15},{"date":"2015-06-08","value":14.1},{"date":"2014-12-06","value":13.4},{"date":"2014-09-10","value":13.1},{"date":"2014-08-01","value":14.2},{"date":"2014-07-07","value":15},{"date":"2014-05-31","value":14},{"date":"2014-05-24","value":15},{"date":"2014-05-14","value":15},{"date":"2014-05-13","value":14},{"date":"2014-05-08","value":14.5},{"date":"2014-05-02","value":15}]; 
 

 
var margin = {top: 30, right: 20, bottom: 30, left: 50}, 
 
\t overlayW = $('.chart').innerWidth(), 
 
\t overlayH = $('.chart').innerHeight(), 
 
\t width = overlayW, 
 
\t height = 250 - margin.top - margin.bottom, 
 

 
\t parseDate = d3.time.format("%Y-%m-%d").parse, 
 
\t bisectDate = d3.bisector(function(d) { return d.date; }).left, 
 
\t formatValue = d3.format(",.2f"); 
 

 
var x = d3.time.scale() 
 
\t .range([0, width]); 
 

 
var y = d3.scale.linear() 
 
\t .range([height, 0]); 
 

 
var xAxis = d3.svg.axis() 
 
\t .scale(x) 
 
\t .tickSize(0) 
 
\t .tickValues(x.domain()) 
 

 
\t .orient("bottom") 
 
\t .tickFormat(d3.time.format("%b")); 
 

 
var yAxis = d3.svg.axis() 
 
\t .scale(y) 
 
\t .tickSize(0) 
 
\t .ticks(5) 
 
\t .orient("left"); 
 

 
var area = d3.svg.area() 
 
\t .x(function(d) { return x(d.date); }) 
 
\t .y0(height) 
 
\t .y1(function(d) { return y(d.value); }); 
 

 
var svg = d3.select(".drawn").append("svg") 
 
\t \t .attr("width", width) 
 
\t \t .attr("height", height + margin.top + margin.bottom) 
 
\t .append("g") 
 
\t \t .attr("transform", "translate(-15,30)"); 
 

 
enter(entries); 
 

 

 

 

 

 

 
function enter(data) { 
 

 
\t data.forEach(function(d) { 
 
\t \t d.date = parseDate(d.date); 
 
\t \t d.value = +d.value; 
 
\t }); 
 

 
\t data.sort(function(a, b) { 
 
\t \t return a.date - b.date; 
 
\t }); 
 

 
    x.domain([data[0].date, data[data.length - 1].date]); 
 
    y.domain(d3.extent(data, function(d) { return d.value; })); 
 
    //y.domain(d3.extent(data, function(d) { return d.value; })); 
 
    var e = d3.extent(data, function(d) { return d.value; }); 
 
    
 

 

 

 
    svg.append("path") 
 
\t .datum(data) 
 
\t .attr("class", "area") 
 
\t .attr("d", area); 
 

 

 

 

 

 
    svg.append("g") 
 
\t .attr("class", "x axis") 
 
\t .attr("transform", "translate(0," + height + ")") 
 
\t .call(xAxis); 
 

 
    svg.append("g") 
 
\t .attr("class", "y axis") 
 
\t \t .attr("transform", "translate(" + width + ",0)") 
 
\t .call(yAxis); 
 

 

 

 
}

.chart {display:block;background:#4BAC4E;height:250px;width:600px;} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: rgba(0, 0, 0, .3); 
 
    shape-rendering: crispEdges; 
 
} 
 

 
text { 
 
    font: 400 11px mono; 
 
    letter-spacing: .3px; 
 
    text-transform: uppercase; 
 
    fill: rgba(0, 0, 0, .3); 
 
} 
 

 
.domain { 
 
    display: none; 
 
} 
 

 
.area { 
 
    fill: black; 
 
    stroke: none; 
 
    stroke-width: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chart"> 
 
    <div class="drawn"></div> 
 
</div>

https://jsfiddle.net/5kesyqu0/3/

Answer 1

Вы можете достичь этого сделать линейный градиент, как это:

//make defs and add the linear gradient 
var lg = svgmain.append("defs").append("linearGradient") 
.attr("id", "mygrad")//id of the gradient 
.attr("x1", "0%") 
.attr("x2", "0%") 
.attr("y1", "0%") 
.attr("y2", "100%")//since its a vertical linear gradient 
; 
lg.append("stop") 
.attr("offset", "0%") 
.style("stop-color", "red")//end in red 
.style("stop-opacity", 1) 

lg.append("stop") 
.attr("offset", "100%") 
.style("stop-color", "blue")//start in blue 
.style("stop-opacity", 1) 

Затем добавьте этот градиент к заливке вашего пути.

svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("d", area) 
     .style("fill", "url(#mygrad)");//id of the gradient for fill 

Рабочий код here.

Другой пример в соответствии с вашим requirement (Для того, чтобы нижняя часть градиента была прозрачной, а верхняя часть области заполнена красным цветом).