Как изменить искажение fisheye d3js так, чтобы он поддерживал радиус

Question

Я пытаюсь изменить проект fisheye this, чтобы я мог использовать функцию радиуса для увеличения размера рыбий глаз. Моя цель - видеть больше клеток больше вокруг мыши. Текущая реализация не поддерживает функцию радиуса. Если я использую круговую форму вместо шкалы, я могу использовать функцию радиуса. Но в этом случае я не знаю, как использовать циркуляр.

В любом случае, помощь приветствуется :)

Спасибо!

Answer 1

Параметр радиуса кругового рыбий глаз помещает границу в эффекты увеличения. Напротив, в шкале/картезианском рыбе, весь график изменяется. Ячейка фокусировки увеличивается, а другие ячейки сжимаются в зависимости от того, насколько они далеко от фокуса. Границы нет, сжатие продолжается плавно (постепенно сжимается) до края графика. См http://bost.ocks.org/mike/fisheye/#cartesian

Если то, что вы хотите, что клетки рядом с фокусом не сжимаются, как много (так что вы можете сравнить эффективно соседние ячейки), то параметр изменить это искажение параметра. Более низкое искажение уменьшает количество увеличения фокусной ячейки и, следовательно, оставляет больше места для смежных ячеек. Параметр искажения по умолчанию - 3, вы используете более высокие значения, что увеличивает увеличение ячейки фокусировки за счет всех остальных.

Если изменение искажения вас не устраивает, попробуйте изменить тип шкалы, используя d3.fisheye.scale(d3.scale.sqrt); это изменит функцию, определяющую изменение увеличения изображения при удалении от точки фокусировки. (Я не мог получить другие типы весов для работы - журнал выдает ошибку, и с силой весы нет никакого способа, чтобы установить показатель.)

Редактировать

После дополнительной игры вокруг, я 'm не удовлетворены результатами изменения типа входного масштаба. Я неправильно понял, как это повлияет на это: он не изменяет функцию масштабирования для искажения, а для исходных данных, так что изменения отличаются от точек выше фокуса по сравнению с точкой ниже фокуса. Тип шкалы, который вы указываете как параметр для шкалы рыбий глаз, должен быть основным типом шкалы, который имеет смысл для данных и отличается от эффектов рыбий глаз.

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

В исходного кода для масштаба рыбьего является:

function fisheye(_) { 
    var x = scale(_), 
     left = x < a, 
     range = d3.extent(scale.range()), 
     min = range[0], 
     max = range[1], 
     m = left ? a - min : max - a; 
    if (m == 0) m = max - min; 
    return a + (left ? -1 : 1) * m * (d + 1)/(d + (m/Math.abs(x - a))); 
} 

_ является входным значением, scale обычно линейным масштаб, для которого был задан домен и диапазон, a - это точка фокусировки в выходном диапазоне, а d - параметр искажения.

Другими словами: чтобы определить точку, в которой значение рисуется на искаженном масштабе:

• вычислить положение диапазона значения на основании неискаженной/масштабе по умолчанию;
• вычислить расстояние от фокуса ({distance}, Math.abs(x-a));
• рассчитать расстояние между краем графика и фокальной точкой ({общее расстояние}, m);
• возвращаемое значение смещено от фокальной точки на {общее расстояние}, умноженное на
  (d + 1)/(d + ({total distance}/{distance}));
• При необходимости отрегулируйте в зависимости от того, находится ли значение ниже или выше фокальной точки.

Для точки входа, который на полпути между фокальной точкой и ребром графа по шкале неискаженной, внутренняя фракция {общее расстояние}/{} расстояние будет равно 2. Внешняя дробь поэтому будет (d+1)/(d+2). Если d равно 0 (без искажений), это будет равно 1/2, а выходная точка также будет на полпути между фокальной точкой и краем графика. Поскольку параметр искажения, d, увеличивается, эта доля также увеличивается: при d=1, выходная точка будет равна 2/3 пути от фокальной точки к краю графика; на d=2, это было бы 3/4 пути к краю графика; и так далее.

Напротив, когда входное значение очень близко к фокусу, {distance} почти равно 0, поэтому внутренняя фракция приближается к бесконечности, а внешняя фракция приближается к 0, поэтому возвращаемая точка будет очень близка к фокусу точка.

Наконец, когда входное значение очень близко к краю графика, {distance} почти {total distance}, и внутренняя и внешняя фракции будут почти 1, поэтому возвращенная точка также будет очень близко к краю графика.

Эти последние две идентичности, которые мы хотим сохранить. Мы просто хотим изменить соотношение между ними - как смещение от фокальной точки изменяется, так как входная точка удаляется от фокальной точки и ближе к краю графика. Изменение параметра искажения изменяет величину искажения как в ближнем, так и в отдаленном значениях. Если вы уменьшите параметр искажения, вы также уменьшите общее увеличение, так как все данные по-прежнему должны находиться в одном и том же пространстве.

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

Мой измененный код для одной и той же функции:

function fisheye(_) { 
    var x = scale(_), 
     left = x < a, 
     range = d3.extent(scale.range()), 
     min = range[0], 
     max = range[1], 
     m = left ? a - min : max - a, 
     dp = Math.pow(d, p); 
    if (m == 0) return left? min : max; 
    return a + (left ? -1 : 1) * m * 
     Math.pow( 
     (dp + 1) 
    /(dp + (m/Math.abs(x-a))) 
     , p); 
} 

Я изменил две вещи: я поднимаю фракции (d + 1)/(d + {total distance}/{distance}) к власти, и я также заменить оригинальный d значение с этим повышен до тот же показатель (dp). Первое изменение - это изменение отношения, второе - просто настройка, так что данный параметр искажения будет иметь примерно одинаковый общий эффект увеличения независимо от параметра мощности.

Фракция, поднятая до мощности, по-прежнему будет близка к нулю, если фракция близка к нулю и будет по-прежнему близка к единице, если фракция близка к единице, поэтому базовые значения остаются неизменными. Однако, когда параметр мощности меньше единицы, скорость изменения будет меньше по краям и круче в середине. При параметре мощности, превышающем 1, скорость изменения будет довольно крутой на краях и ниже вблизи фокальной точки.

Пример здесь: http://codepen.io/AmeliaBR/pen/zHqac
Горизонтальная шкала рыбьего глаза имеет функцию питания квадратного корня (p = 0.5), в то время как по вертикали имеет квадратную функцию (p = 2). Оба имеют один и тот же отрегулированный параметр искажения (d = 6).

Эффект функции квадратного корня состоит в том, что даже самые дальние столбцы по-прежнему имеют видимую ширину, но изменение ширины столбца вблизи фокуса является значительным. Эффект мощности функции 2 состоит в том, что строки, расположенные далеко от фокальной точки, сжимаются до почти невидимой высоты, но строки выше и ниже фокуса по-прежнему имеют значительный размер. Я думаю, что эта последняя версия достигает того, на что надеялся @piedpiper.

Я, конечно, также добавил .power функции шкалы рыбьей для того, чтобы установить параметр p, и установить значение по умолчанию для p к 1, что даст те же результаты, что и оригинальный рыбий масштаб. Я использую имя power для способа отличить от метода exponent от power scales, который будет использоваться, если они , лежащие в основе шкалы (до искажения) имели соотношение мощности.