Перетаскивание точек перекрытия

Question

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

Проблема, с которой я сталкиваюсь сейчас, заключается в том, что, как только пользователь перетаскивает и опускает точку прямо на линию или точку фигуры, пользователь не может перетащить точку. Я установил fiddle с моей текущей настройкой.

---

JavaScript/JQuery код:

$(function() { 
    var startPoint = [[7.00, 0]]; 

    var line10 = HHIsoPleth(7.00, 7.80, 10); 
    var line120 = HHIsoPleth(7.00, 7.80, 120); 

    var options = { 
     series: {      
      points: { 
       editMode: "none", 
       show: true, 
       radius: 0, 
       symbol: "circle", 
       fill: true, 
       hoverable: false, 
      }, 
      lines: { 
       editMode: "none", 
       editable: false, 
       hoverable: false, 
       clickable: false 
      } 
     }, 
     yaxes: [ { 
      position: "left", 
      min: 0, max: 60, 
      tickSize: 4, 
     } ], 
     xaxes: [ { 
      position: "bottom", 
      min: 7.00, max: 7.80, 
     } ], 
     grid: { 
      backgroundColor: "transparent", 
      editable: true, 
      hoverable: true, 
      clickable: false, 
     }, 
     legend: { 
      position: "nw" 
     },    
    };  

    var data = [     
     { data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
     { data: line120, lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 

     { data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' }, 
    ]; 

    var plot = $.plot($("#flot-placeholder"), data, options); 

    // Drag and drop 
    $("#flot-placeholder").bind("datadrop", function(event, pos, item) {   
     var PCO2 = getPCO2(pos.x1.toFixed(2), pos.y1.toFixed(2)); 
     var pH = getPH(pos.y1.toFixed(2), PCO2); 
     var HCOmm = getHCO3(pH, PCO2); 

     updatePoint(pH, HCOmm); 
    }); 

    // Generate red lines/isopleths 
    function HHIsoPleth(minPH, maxPH, PCO2){ 
     var isoPleth = []; 
     for (var i = minPH; i < maxPH; i+=0.01){ 
      HCOmm = (0.03 * PCO2 * Math.pow(10,i-6.1)); 
      isoPleth.push([i,HCOmm]); 
     } 
     return isoPleth; 
    } 

    function getHCO3(ph, pco2) { 
     return 0.03 * pco2 * Math.pow(10, ph - 6.1); 
    } 

    function getPH(hco3, pco2) { 
     return 6.1 + Math.log10(hco3/(0.03 * pco2)); 
    } 

    function getPCO2(ph, hco3) { 
     return (hco3/0.03) * Math.pow(10, 6.1 - ph); 
    } 

    //Reset point 
    $("#davenportReset").click(function() { 
     updatePoint(7.00, 0); 
    }); 

    function updatePoint(x, y) { 
     data[16].data[0] = [x, y]; 
     $.plot($("#flot-placeholder"), data, options); 
    } 

    // Debug purpose, get the index of the point that is clicked 
    $("#placeholder").bind("plotdown", function(event,pos,item){ 
     $("#log").append("\nplotdown(" + item.seriesIndex + ")"); 
    }); 
}); 

Дополнительные библиотеки: Flot.js, JUMFlot

HTML:

<input class="davenportInput" id="davenportReset" type="button" value="Reset Point" /> 
<div id="flot-placeholder" style="width:558px;height:511px"></div> 
    eventlog<textarea id="log" rows="15" cols="28"></textarea> 

---

В представленной скрипку вы увидите, что Y ou может перетащить зеленую точку вокруг участка. Но как только вы уроните его на одну из красных линий, больше невозможно перетащить зеленую точку в другое место. В текстовом поле вы увидите, что при нажатии зеленой точки в текстовом поле будет отображаться plotdown(16). Но покажет plotdown(0-15), когда нажимается, когда точка находится над любой красной/желтой линией.

Можно ли получить 16-ю строку данных (точку перетаскивания), когда она перекрывает любую из красных линий?

---

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

Это то, что я сделал:

var startPoint = [[7.00, 0]]; 
    var invisPoint = [[7.00, 0]]; 

    var line10 = HHIsoPleth(7.00, 7.80, 10); 
    var line120 = HHIsoPleth(7.00, 7.80, 120); 

Чтобы создать невидимую точку заполнитель.

я чем добавил его к данным объекта

var data = [ 

    { data: invisPoint , lines: { show: false }, points: { show: false, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' }, 

    { data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
    { data: line120, lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 

    { data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' }, 
]; 

И обновлена ​​функция updatePoint

 function updatePoint(x, y) { 
      var data = plot.getData(); 
      data[0].data[0] = [x, y]; // Invisible point 
      data[17].data[0] = [x, y]; // Green point 
      plot.setData(data); 
      plot.draw(); 
     } 

Таким образом, невидимая точка получает выбран и перетаскивать. Я просто использую эти координаты, чтобы поместить зеленую точку.

Answer 1

Внутренний, flot или jumflot в этом случае, когда вы mousedown ищет точки, чтобы увидеть, достаточно ли близко к курсору мыши. Он ищет точки в порядке и находит ваш сегмент линии перед точкой. Таким образом, простое исправление, поместите переход в состоянии точки первый:

var data = [  
      { data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' }, 
      { data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" }, 
    .... 

Кроме того, обновить сюжет так:

function updatePoint(x, y) { 
    var data = plot.getData(); 
    data[0].data[0] = [x, y]; 
    plot.setData(data); 
    plot.draw(); 
} 

Вызов $.plot снова и снова дорого и, вероятно, утечка памяти (он использовал, по крайней мере, - не уверен, что это было исправлено).

Обновлено fiddle.