Как сделать так, чтобы моя область, заполненная под диаграммой D3, была градиентом?

Я использую d3 v4. Я хотел бы создать линейный график, где область под графиком-это область, заполненная градиентом, идущим от темного вверху к светлому внизу. Я думал, что это был способ настроить такой градиент 

  svg.append("linearGradient")
        .attr("id", "area-gradient")
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", 0).attr("y1", y(0))
        .attr("x2", 0).attr("y2", y(1000))
    .selectAll("stop")
        .data([
            {offset: "0%", color: "navy"},
            {offset: "30%", color: "navy"},
            {offset: "45%", color: "navy"},
            {offset: "55%", color: "navy"},
            {offset: "60%", color: "navy"},
            {offset: "100%", color: "navy"}
        ])
    .enter().append("stop")
        .attr("offset", function(d) { return d.offset; })
        .attr("stop-color", function(d) { return d.color; });

И используя этот стиль 

.area {                         
    fill: url(#area-gradient);                  
    stroke-width: 0px;          
}
Но, как вы можете видеть из моей скрипки -- https://jsfiddle.net/yw46ycse/3/, вместо этого у меня есть сплошная область. Что еще мне нужно сделать, чтобы область под графиком стала градиентом?
2 2
css3 d3.js gradient

2 ответа:

Это та версия решения, которую вы ищете. В качестве стоп-цвета можно использовать прозрачный {offset: "95%", color: "transparent"}.

Вот модифицированная версия вашей скрипки, которую я использовал, чтобы сделать ее так, как вам нужно.

Https://codepen.io/Nasir_T/pen/OjOWxz

Надеюсь, это поможет.

2

Несколько вопросов для рассмотрения:

  1. у вас есть "флот" для каждой остановки, поэтому градиент не будет отображаться
  2. в данном случае было бы лучше не .attr("gradientUnits", "userSpaceOnUse"). Используя настройку objectBoundingBox по умолчанию (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/gradientUnits ) тогда вы можете просто использовать 0,0 0,1 для задания вертикального линейного градиента.

Например: 

svg.append("linearGradient")
        .attr("id", "area-gradient")
        .attr("x1", 0).attr("y1", 0)
        .attr("x2", 0).attr("y2", 1)
    .selectAll("stop")
        .data([
            {offset: "0%", color: "navy"},
            {offset: "100%", color: "red"}
        ])
    .enter().append("stop")
        .attr("offset", function(d) { return d.offset; })
        .attr("stop-color", function(d) { return d.color; })

Обновленная скрипка: https://jsfiddle.net/yw46ycse/4/

2