拖放重疊點

Question

我有一張圖形用很多線條繪製，一個相當大的圖形與線條重疊，ontop是一個能夠被用戶拖放到整個圖形上的點。

我目前面臨的問題是，只要用戶拖放點直線的頂點或圖的一個點，用戶無法拖放點。我用當前的設置建立了一個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> 

---

在提供的小提琴，你會看到， ÿ你可以將綠點拖放到圖上。但是，一旦將它放在任何紅線上，就不可能將綠點拖放到其他地方。在textarea中，你會看到當你點擊綠色點時，plotdown(16)將顯示在textarea中。但當點在任何紅色/黃色線上時，點擊時將顯示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在這種情況下，您在搜索時正在搜索點以查看您是否接近鼠標光標。它按順序搜索點並在點之前找到您的線段。所以，簡單的解決，首先把你的舉動，能點：

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。