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。

拖放重叠点

1 个答案: