交互式拖动图表

我正在寻找为人们创建一个迭代图表，将圆圈拖到图表的一部分然后提交。这个圈子会出现在图表上供其他人看到。这背后的想法是确定一个项目对利益相关者最重要的方面。交互式拖动图表

我有一个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

交互式拖动图表

回答

相关问题