D3js는 드래그 동작의 원점을 재설정합니다.

Fawzan

svg 그룹의 드래그 동작을 재설정하려고합니다. 내 요구 사항은 마지막으로 중지 된 곳에서 그룹을 이동하는 것입니다. 여기 내 작업 바이올린이 있습니다. 일부가 나를 도울 수 있습니까?

<g id="a" transform="translate(0,0)">
    <g>
        <rect x="10" y="10" width="200" height="200" fill="red"></rect>
        <circle r="5" cx="10" cy="105" fill="blue"></circle>
        <circle r="5" cx="210" cy="105" fill="blue"></circle>
    </g>
    <g id="b" class="e" transform="translate(0,0)">
        <rect x="20" y="20" width="50" height="50" fill="black"></rect>
        <circle r="5" cx="20" cy="45" fill="blue"></circle>
        <circle r="5" cx="70" cy="45" fill="blue"></circle>
    </g>
    <g id="c" class="e" transform="translate(0,0)">
        <rect x="90" y="20" width="50" height="50" fill="black"></rect>
        <circle r="5" cx="90" cy="45" fill="blue"></circle>
        <circle r="5" cx="140" cy="45" fill="blue"></circle>
    </g>
</g>

<script>
    d3.select('#a').call(d3.behavior.drag().on('drag', function () {
        d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
//        d3.event.stopPropagation();

    }));

    d3.selectAll('.e')
            .call(d3.behavior.drag()
                    .origin(function () {
                        var t = d3.select(this);
                        return {x: t.attr("x"), y: t.attr("y")};
                    }
                    )
                    .on('dragstart', function () {
                        d3.event.sourceEvent.stopPropagation();
                    })
                    .on('drag', function () {
                        console.log();
                        d3.select(this).attr('transform', 'translate(' + d3.event.x + ',' + d3.event.y + ')');
                    }))
                    .on('dragend', function () {
                        d3.select(this).call(d3.behavior.drag().origin(function () {

                            var t = d3.select(this);
                            return {x: t.attr("x"), y: t.attr("y")};
                        }))
                    })

    ;


</script>
파스 나

이 작업을 수행하려면 origin 함수가 필요합니다. SVG에서 드래그 할 때마다이를 추가해야합니다.

.origin(function() { var t = d3.select(this); return {x: t.attr("x") + d3.transform(t.attr("transform")).translate[0], y: t.attr("y") + d3.transform(t.attr("transform")).translate[1]}; })

바이올린 확인

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

JavaScript는 객체 메서드를 재정의하지만 원래 동작은 그대로 유지합니다.

분류에서Dev

Matlab에서 선형 프로그래밍 코드를 설정하여 4D 이상 차원의 정점을 얻습니다.

분류에서Dev

d3js Box and Whisker 플롯 : 분포의 한 점을 플롯 할 단일 원을 추가합니다.

분류에서Dev

수동으로 그려진 원이있는 D3js 줌

분류에서Dev

노드 및 링크가있는 D3js 드래그 동작

분류에서Dev

CollectonView는보기에로드 된 후 원점을 "재조정"합니다.

분류에서Dev

D3js는 원에서 가장 가까운 지점을 찾습니다.

분류에서Dev

LogisticDx를로드 한 후 플롯 함수의 기본 (그래픽 : :) 동작을 재설정하는 방법은 무엇입니까?

분류에서Dev

d3js는 많은 수의 노드를 강제합니다.

분류에서Dev

그래프와 함께 d3js 그래프 스케일의 텍스트를 만드는 방법은 무엇입니까?

분류에서Dev

JToolBar의 드래그 앤 드롭 삽입은 원하는 동작하지 않습니다

분류에서Dev

d3js 다중 그래프 자동 업데이트

분류에서Dev

deleteRowsAtIndexPaths는 사용자 정의 셀을 재설정합니다.

분류에서Dev

Form으로 래핑 된 그리드 라이브러리는 작동하지 않는 사용자 정의 렌더러를 지원합니다.

분류에서Dev

D3js로 서로 다른 시간에 원을 그리는 방법은 무엇입니까?

분류에서Dev

d3js에서 선을 그리는 데 문제가 있습니다.

분류에서Dev

Azure Storage : BlobClient는 대용량 파일을 업로드하는 동안 자체 재설정을 계속합니다.

분류에서Dev

Python dict 하위 클래스에서 __setitem__을 재정의하면 내부 항목의 값을 설정하는 데 작동하지 않습니다.

분류에서Dev

드래그 가능한 원을 추가하는 D3.js가 단일 추가시 작동하지 않음

분류에서Dev

두 JSON 속성의 조합 인 D3js에서 그룹화 키를 만드는 방법

분류에서Dev

d3js는 선 차트에서 확대 / 축소 작업을 수행합니다.

분류에서Dev

d3.js 차트 함수 동작을 어떻게 재정의합니까?

분류에서Dev

d3.js 차트 함수 동작을 어떻게 재정의합니까?

분류에서Dev

d3js는 고정 노드로 강제 레이아웃을 만듭니다.

분류에서Dev

Compiz의 "드래그하여 최대화"동작을 해제하는 방법은 무엇입니까?

분류에서Dev

CSS를 재정의하면 노드 확장 또는 축소 후 D3JS 트리 경로 링크가 표시됩니다.

분류에서Dev

d3js 고정 노드가 이동하는 이유는 무엇입니까?

분류에서Dev

사용자 정의 uitableviewcell 재설정 subview 프레임이 원하는대로 작동하지 않습니다.

분류에서Dev

그래픽 드라이버는 한 번만 작동합니다.

Related 관련 기사

  1. 1

    JavaScript는 객체 메서드를 재정의하지만 원래 동작은 그대로 유지합니다.

  2. 2

    Matlab에서 선형 프로그래밍 코드를 설정하여 4D 이상 차원의 정점을 얻습니다.

  3. 3

    d3js Box and Whisker 플롯 : 분포의 한 점을 플롯 할 단일 원을 추가합니다.

  4. 4

    수동으로 그려진 원이있는 D3js 줌

  5. 5

    노드 및 링크가있는 D3js 드래그 동작

  6. 6

    CollectonView는보기에로드 된 후 원점을 "재조정"합니다.

  7. 7

    D3js는 원에서 가장 가까운 지점을 찾습니다.

  8. 8

    LogisticDx를로드 한 후 플롯 함수의 기본 (그래픽 : :) 동작을 재설정하는 방법은 무엇입니까?

  9. 9

    d3js는 많은 수의 노드를 강제합니다.

  10. 10

    그래프와 함께 d3js 그래프 스케일의 텍스트를 만드는 방법은 무엇입니까?

  11. 11

    JToolBar의 드래그 앤 드롭 삽입은 원하는 동작하지 않습니다

  12. 12

    d3js 다중 그래프 자동 업데이트

  13. 13

    deleteRowsAtIndexPaths는 사용자 정의 셀을 재설정합니다.

  14. 14

    Form으로 래핑 된 그리드 라이브러리는 작동하지 않는 사용자 정의 렌더러를 지원합니다.

  15. 15

    D3js로 서로 다른 시간에 원을 그리는 방법은 무엇입니까?

  16. 16

    d3js에서 선을 그리는 데 문제가 있습니다.

  17. 17

    Azure Storage : BlobClient는 대용량 파일을 업로드하는 동안 자체 재설정을 계속합니다.

  18. 18

    Python dict 하위 클래스에서 __setitem__을 재정의하면 내부 항목의 값을 설정하는 데 작동하지 않습니다.

  19. 19

    드래그 가능한 원을 추가하는 D3.js가 단일 추가시 작동하지 않음

  20. 20

    두 JSON 속성의 조합 인 D3js에서 그룹화 키를 만드는 방법

  21. 21

    d3js는 선 차트에서 확대 / 축소 작업을 수행합니다.

  22. 22

    d3.js 차트 함수 동작을 어떻게 재정의합니까?

  23. 23

    d3.js 차트 함수 동작을 어떻게 재정의합니까?

  24. 24

    d3js는 고정 노드로 강제 레이아웃을 만듭니다.

  25. 25

    Compiz의 "드래그하여 최대화"동작을 해제하는 방법은 무엇입니까?

  26. 26

    CSS를 재정의하면 노드 확장 또는 축소 후 D3JS 트리 경로 링크가 표시됩니다.

  27. 27

    d3js 고정 노드가 이동하는 이유는 무엇입니까?

  28. 28

    사용자 정의 uitableviewcell 재설정 subview 프레임이 원하는대로 작동하지 않습니다.

  29. 29

    그래픽 드라이버는 한 번만 작동합니다.

뜨겁다태그

보관