拖放重叠点

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>

在提供的 fiddle 中，您会看到您可以拖放绘图周围的绿点。但是，一旦将其放在任何红线之上，就无法再将绿点拖放到其他位置。在文本区域中，您会看到当您单击绿点时，plotdown(16) 将显示在文本区域中。但是当点在任何 red/yellow 行上时单击它时将显示 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。

拖放重叠点

Drag and drop overlapping points

javascript

jquery

flot