0
차트의 섹션으로 원을 드래그하여 제출하는 사람들을위한 반복 차트를 만들려고합니다. 이 서클은 다른 사람들이 볼 수 있도록 차트에 표시됩니다. 이 아이디어는 프로젝트의 가장 중요한 측면을 이해 관계자에게 결정하는 것입니다.대화 형 드래그 가능 차트
나는이 기능의 일부를 보여주는 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>
감사