拖放重叠点

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>

---

在提供的小提琴中，您会看到您可以在绘图周围拖放绿点。但是一旦你把它放在任何红线上，就不能再将绿点拖放到其他地方了。在 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 在这种情况下，当您 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。