В D3.js, чтобы нарисовать линию я определил бы функцию линии, которая будет выглядеть примерно так:Plotting по пути в d3.js
var line = d3.svg.line()
.x(function(d) { return x(d.distance); })
.y(function(d) { return y(d.speed); });
Это функция, которую я назвал бы оказать скорость, записанная во время велосипедного тура, например. Ось distance горизонтальна.
Но, на самом деле, велосипедная дорожка не является горизонтальной, и у меня есть переменная elevation внутри объекта данных. Как я могу использовать это для построения скорости по фактической велосипедной дорожке, показывающей взлеты и падения, а относительное увеличение и уменьшение скорости?
В вашем опыте, какой лучший подход к построению переменной по пути? Ось x должна совпадать с определенным путем, а ось y всегда перпендикулярна ей.
Я думаю использовать "Point-Along-Path interpolation" вместе с каким-то производным вычислением, чтобы узнать, что такое перпендикулярное направление ... и затем найти координаты x, y данной точки.
Но, может быть, я не использую некоторые очень простое решение, как той, которая используется в «искривленном textPath» (Mike Босток в блок # 2565344), который использует только hlink свойство text элемента. Надеюсь, ты сможешь пролить свет на это!
EDIT: Я добавил an example image, чтобы выразить то, что я имел в виду под словом «наведение переменной вдоль пути». Обратите внимание, что путь используется для установки формы оси x.
Итак, у вас есть 3 переменные и хотите построить их все в очереди? Это не сработает. Вы можете нарисовать фактический след и цветовой код в соответствии со скоростью, например. –
Возможно, я высказался неправильно. Пожалуйста, см. [Пример изображения, который я подготовил] (http://s4.postimg.org/mcyqicq5p/Bend_X_Axis.jpg), и он будет более четко понимать, что я имел в виду, «построив переменную вдоль пути». Переменная, построенная так же. Но ось теперь «согнута» в соответствии с другим отношением. – D3Starter
А, я вижу. Похоже, это было бы сложно сделать с D3; Я, конечно, не знаю таких примеров. –