拖放重叠点

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。