У меня есть две кривые, каждая из которых определяется интерполяцией по набору значений (x, y) с использованием d3.svg.line. Я бы хотел, чтобы одна строка была красной, когда она была ниже другой, и была зеленой, если выше. Как так:Для двух произвольных интерполированных кривых, их цвет на основе относительных значений
Как это можно сделать?
Посмотрите на диаграмму Difference в своих примерах, она очень похожа на то, что вы хотите, и может удовлетворить ваши критерии. Если нет, я думаю, вы можете легко адаптировать его к вашим потребностям.
это на самом деле именно то, что я искал, спасибо. – Jonah
Основная проблема заключается в том, что вы не можете напрямую назначить несколько цветов для пути. Таким образом, у вас есть два основных варианта.
В любом случае вам нужно будет рассчитать точки, где линии пересекают вас. Если ваши строки указаны как функции, это достаточно легко сделать с некоторой алгеброй. Если у вас есть только точки и вы хотите интерполировать между ними, это немного сложнее.
Как только у вас есть точки, где пересекаются линии, это просто вопрос о том, как закончить путь/градиент.
спасибо за ваш ответ, это был подход, который пришел мне на ум, и это казалось слишком сложным. Я посмотрю, как mbostock сделал это на примере Яна, так как это идеально для меня. – Jonah
Я не думаю, что этот пример применим в вашем случае, так как он не окрашивает путь, а область, определенную путем. –
Почему? Потому что трудно сказать, находится ли одна строка выше/ниже другой? –
Зависит от вашего определения «легко» - если вы имеете в виду «есть ли опция, которую я могу установить, чтобы получить это», тогда ответ будет отрицательным. Вам придется реализовать это самостоятельно. –
@ LarsKotthoff вопрос отредактирован для того, чтобы быть яснее для вас – Jonah