Масштаб не дает ожидаемых значений в d3.js

Question

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

например, start_range и end_range равны 130,0, вторые -290-160, в основном увеличивающиеся сверху вниз со 130 (высота каждого графика), и 30 пикселей, которые я положил между ними, для первого графика - 1415,1500, и -20,20 за второе

А теперь проблемы - я пытаюсь поставить пороговую линию на 1437 в первом и 0 во втором

 g.append('line')
                .attr('x1', 0) //starts at first x
                .attr('y1', window['scale_vwl'](0)) //starts where I tell him in the function argument
                .attr('x2',width)  //ends at last x (fortunately the x are the same for all arrays (data1,data2 etc)
                .attr('y2', window['scale_vwl'](0))
                .attr('class', 'mediumline');

На графике он расположен где-то около 1457 в первом случае и 10 во втором (где это должно быть 0)

Я подумал, может быть, я перепутал некоторые поля, но разница с тем, где он находится и где я хочу, составляет 20 в первом случае и 10 во втором, поэтому я не могу заставить что-то вроде -20

Я попытался сделать 0 на всех полях, но все равно дает мне неправильную позицию. Почему это так? Я старался alert(window['scale_'+param_name](1437)) и это дает мне 95

Я прочитал способ преобразования весов, поэтому я сделал это тоже, мой начальный интервал 1415-1500, разница =85, мой интервал графика 0-130, разница 130

factor = 85 / 130 = 0.65

но 1437 / 0.65 = 2210,7Я чувствую себя полностью потерянным

И второй вопрос: если я создаю линию и круги на основе моих данных, почему они находятся в разных позициях на графике? (круги сверху) что правильно?

Я отчаянно искал и ничего не вышло. Пожалуйста, дайте мне подсказку, если это возможно

Вот рабочая скрипка https://jsfiddle.net/zk5j5fno/ Спасибо

Answer 1

Вероятно, было бы проще построить каждый сюжет в своем SVG. То, что у вас есть сейчас, страдает от too many magic numbers синдром. Как только вы начнете вводить позиции пикселей, вам нужно переосмыслить свой подход. Например:

 build_yaxis_path('vwl', data2, 290, 160, -20, 20); //<- why 290, why 160?

Тем не менее, эта линия отбрасывает ваш масштаб (ну, в действительности, масштаб в порядке, ось расположена неправильно):

//append axis
g.append("g")
  .attr("class", "y axis " + param_name)
  .style("fill", "steelblue") //here change color
  .attr('transform', 'translate(0, 30)') //<-- 30?

Если вы избавитесь от этой линии, масштаб и ось совпадут. Конечно, это заставляет вас настраивать вещи в другом месте...

Вот пример, где я исправил несколько вещей.