Скрыть отрицательную часть графика в d3. js

Question

У меня есть линейный график d3. js, который может иметь отрицательные значения. Мой диапазон Y начинается с 0 и достигает максимального значения в наборе данных. Таким образом, линия идет под осью X, когда есть отрицательное значение.

Это хорошо, но мне нужно просто скрыть часть линии, которая находится под осью X. Я хочу сохранить значения такими, какие они есть, просто используйте некоторые CSS или JS, чтобы сделать часть линии под осью X невидимой.

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

Этот код рисует линию:

x.domain([d3.min(data, function(d) { return d.date}), d3.max(data, function(d) { return d.date})]);
y.domain([0, 1.05 * d3.max(data, function (d) { return d.value; })]);
area.y0(y(0));

g.append("path")
    .datum(data)
    .attr("fill", "#f6f6f6")
    .attr("d", area);

//create line
var valueline = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.value); });

g.append("path")
    .data([data])
    .attr('fill', 'none')
    .attr('stroke', '#068d46')
    .attr("class", "line")
    .attr("d", valueline);

Скрипка: https://jsfiddle.net/c1bvrd50/1/

Answer 1

Один из способов решения этой проблемы - обрезать линию внутри прямоугольника, охватывающего область положительных значений. В SVG это делается с помощью clip-path.

Это происходит в два этапа:

1. Определение rect внутри clipPath, охватывающее Только область графика:

g.append('clipPath')
  .attr('id', 'clipRect')
  .append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', width)
    .attr('height', height)

Обрезать путь строки, используя атрибут clip-path:

g.append("path")
  .data([data])
  /* ... */
  .attr("d", valueline)
  .attr('clip-path', 'url("#clipRect")')

Обновлен jsFiddle, реализующий решение: здесь .

Что осталось до нужно обновить прослушиватель событий mousemove всплывающей подсказки, чтобы подсказка не отображалась, когда значение меньше 0.

Рекомендация в виде PS: каким бы ни был сценарий использования диаграммы, скорее всего, желательно показать части графика с отрицательными значениями. Поэтому ось y диаграммы должна охватывать значения ниже 0, а не пропускать их.