交互式拖動圖表

我正在尋找爲人們創建一個迭代圖表，將圓圈拖到圖表的一部分然後提交。這個圈子會出現在圖表上供其他人看到。這背後的想法是確定一個項目對利益相關者最重要的方面。交互式拖動圖表

我有一個jsfiddle顯示此功能的一部分。我想要「記錄」的是圈子移動後的位置，然後在提交後放到某個地方（CSV）。然後我想要在圖表上顯示CSV顯示中的所有圈子。

檢查元素（圓圈）將顯示其位置。

這是否有意義？有人有主意嗎？有一個更好的方法嗎？

示例代碼通過各種在線教程拼湊起來：

<svg xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="970" 
    height="450"> 

    <script type="text/ecmascript"><![CDATA[ 
    var selectedElement = 0; 
    var currentX = 0; 
    var currentY = 0; 
    var currentMatrix = 0; 

    function selectElement(evt) { 
     selectedElement = evt.target; 
     currentX = evt.clientX; 
     currentY = evt.clientY; 
     currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' '); 

     for(var i=0; i<currentMatrix.length; i++) { 
     currentMatrix[i] = parseFloat(currentMatrix[i]); 
     } 

     selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)"); 
     selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)"); 
     selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)"); 
    } 

    function moveElement(evt) { 
     var dx = evt.clientX - currentX; 
     var dy = evt.clientY - currentY; 
     currentMatrix[4] += dx; 
     currentMatrix[5] += dy; 

     selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")"); 
     currentX = evt.clientX; 
     currentY = evt.clientY; 
    } 

    function deselectElement(evt) { 
     if(selectedElement != 0){ 
      selectedElement.removeAttributeNS(null, "onmousemove"); 
      selectedElement.removeAttributeNS(null, "onmouseout"); 
      selectedElement.removeAttributeNS(null, "onmouseup"); 
      selectedElement = 0; 
      } 
     } 

    ]]> </script> 

    <rect x="0.5" y="0.5" width="970" height="399" fill="#ecf0f1" stroke="black"/> 
    <rect x="0.5" y="0.5" width="970" height="299" fill="none" stroke="black"/> 
    <rect x="0.5" y="0.5" width="970" height="199" fill="#ecf0f1" stroke="black"/> 
    <rect x="0.5" y="0.5" width="970" height="99" fill="none" stroke="black"/> 




    <circle 
     id ="circleitem" 
     cx="50" 
     cy="50" 
     r="20" 
     stroke="black" 
     stroke-width="2" 
     fill="#c0392b" 
     transform="matrix(1 0 0 1 0 0)" 
     onmousedown="selectElement(evt)"/> 


</svg> 

<input name="position1" class="inputfield" id="position1" readonly="readonly"> 
<input name="position2" class="inputfield" id="position2" readonly="readonly"> 



<script type="text/javascript"> 

position1.value = currentMatrix[4]; 
position2.value = currentMatrix[5]; 


</script>

非常感謝

埃裏克

來源

2014-09-22 Eric.18

應在評論，但它是一個漫長的一個：嘗試與節點服務器實時架構：

隨着socket.io（檢查實時聊天編碼，使用它作爲基地）。

在deselectElement()，POST ID,x,y（其中ID=random_sessionID, x=currentMatrix[4], y=currentMatrix[5]）到服務器。調整聊天服務器，將其記錄到關聯數組中，例如users[ID] = [x,y];，並將數據「廣播」給所有連接的客戶端。

A）連接到服務器的新客戶端將收到JSON版本的users陣列。

B）連接的客戶端將接收的更新ID,x,y和兩個方案是：

如果現有ID，更新的x，y值。
如果新ID，請在x，y位置創建id=ID的新圓。

注意：您可以使用其他後端服務器，只需在Node服務器上簡化實現帶websocket的實時更新即可。

來源

2014-09-23 20:39:31

交互式拖動圖表

回答

相關問題