Заполнение диаграммы области D3 над линией - PullRequest
Новая
       53

Заполнение диаграммы области D3 над линией

0 голосов
/ 08 октября 2019

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

https://jsfiddle.net/damamgova/dhLb67mt/

var svg = d3.select("#" + id)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.value = d.value;
});
var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.value); })
    // Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
const maxY = d3.max(data, function(d) { return d.value; });
// Add the valueline path.
svg.append("path")
    .attr("class", "line")
    .attr("stroke", color)
    .attr("stroke-width", 3)
    .attr("fill", "url(#gradient)")
    .attr("d", valueline(data));

// Add Gradient
svg.append("linearGradient")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", 0).attr("y1", y(0))
    .attr("x2", 0).attr("y2", y(maxY))
    .selectAll("stop")
    .data([
        { offset: "0%", color: "transparent" },
        { offset: "50%", color: color + "50" },
        { offset: "100%", color: color }
    ])
    .enter().append("stop")
    .attr("offset", function(d) { return d.offset; })
    .attr("stop-color", function(d) { return d.color; });

// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the Y Axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

1 Ответ

0 голосов
/ 08 октября 2019

Вы определяете генератор пути area, но не используете его для генерации пути для вашей строки.

Вместо этого (в скрипте, но не в коде выше) вы определилигенератор строк называется valueline и использует его для генерации пути.

Если есть заливка, генератор строк закроет конец строки с началом строки и заполнит прилагаемую строкупробел, поэтому вы видите заливку над линией.

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

Ваше определение пути с использованием генератора пути области будет просто: 

svg.append("path")
  .attr("class", "line")
  .attr("stroke", color)
  .attr("stroke-width", 3)
  .attr("fill", "url(#gradient)")
  .attr("d", area(data));

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

https://jsfiddle.net/qp8xvhaL/

...