d3 用漸變填充區域

Question

我想用漸變填充這個折線圖的區域，使漸變的底部是透明的，而區域填充的頂部是黑色的。 這可能嗎？

我所有的谷歌搜索都顯示圖表，如： 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}, overlayW = $('.chart').innerWidth(), overlayH = $('.chart').innerHeight(), width = overlayW, height = 250 - margin.top - margin.bottom, parseDate = d3.time.format("%Y-%m-%d").parse, bisectDate = d3.bisector(function(d) { return d.date; }).left, formatValue = d3.format(",.2f"); var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x).tickSize(0).tickValues(x.domain()).orient("bottom").tickFormat(d3.time.format("%b")); var yAxis = d3.svg.axis().scale(y).tickSize(0).ticks(5).orient("left"); var area = d3.svg.area().x(function(d) { return x(d.date); }).y0(height).y1(function(d) { return y(d.value); }); var svg = d3.select(".drawn").append("svg").attr("width", width).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(-15,30)"); enter(entries); function enter(data) { data.forEach(function(d) { d.date = parseDate(d.date); d.value = +d.value; }); data.sort(function(a, b) { return a.date - b.date; }); 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").datum(data).attr("class", "area").attr("d", area); svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis); svg.append("g").attr("class", "y axis").attr("transform", "translate(" + width + ",0)").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

在這里工作代碼。

另一個例子根據您的要求 （ 因此漸變的底部是透明的，並且區域填充的頂部是紅色的 ）。

Answer 2

我可能會遲到這個聚會，但我最近想要完成的結果完全一樣。 在瀏覽互聯網時，我發現了這個 SO question 並決定發布我自己的答案。 看起來還沒有其他人發布過這個解決方案。 所以，這里是：

let svgDefs = svg.append('defs');    

let filterBlur = svgDefs
    .append("filter")
    .attr('id', 'blur')
    .attr("x", "0")
    .attr("y", "0")
    .append("feGaussianBlur")
    .attr("in", "SourceGraphic")
    .attr("stdDeviation", 20);
    
let mask = svgDefs
    .append("mask")
    .attr('id', 'mask')
    .datum(data)
    .append("path")
    .attr("fill", "#fff")
    .attr("d", d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.value); }));

svg.append("path")
    .datum(data)
    .attr("stroke", "#274EF6")
    .attr("stroke-width", 15)
    .attr("fill", "none")
    .attr("filter", "url(#blur)")
    .attr("mask", "url(#mask)")
    .attr("class", "line-blur")
    .attr("d", d3.svg.line()
        .x(function (d) {
            return x(d.date);
        })
        .y(function (d) {
            return y(d.value);
        }));

基本思想是不使用面積圖，而是使用線寬相當寬的折線圖。 然后，對其應用模糊效果，然后應用蒙版屬性，蒙版的路徑將由該區域創建，我們在第一步中將其丟棄。 希望對您有所幫助

https://jsfiddle.net/RomanTourdyiev/dzcfsh1x/5/