d3/d3-drag

Drag drop is not working using d3.js

farrukhpisces opened this issue · 2 comments

farrukhpisces commented

I am trying to drag SVG element using d3.js. but it gives and stated "Cannot read property 'drag' of undefined"
my code is given below.

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script>

    var drag = d3.behavior.drag().on("drag", dragMovement);
    function dragMovement(d) {
        var dX = d3.event.x - 50;
        var dY = d3.event.y - 50;
        d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
    }
    d3.select(".dragCircle").call(drag);

</script>

<svg width="500" height="500" style="background-color: lightgrey; border: 1px solid black;">
    <circle class="dragCircle" cx="50" cy="50" fill="blue" r="30" cursor="pointer" />
</svg>
farrukhpisces commented
<script src="https://d3js.org/d3.v4.min.js"></script> 
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script>

    var drag = d3.behavior.drag().on("drag", dragMovement);
    function dragMovement(d) {
        var dX = d3.event.x - 50;
        var dY = d3.event.y - 50;
        d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
    }
    d3.select(".dragCircle").call(drag);

</script>

<svg width="500" height="500" style="background-color: lightgrey; border: 1px solid black;">
    <circle class="dragCircle" cx="50" cy="50" fill="blue" r="30" cursor="pointer" />
</svg>
mbostock commented

Please read Changes in D3 4.0; d3.behavior.drag was renamed to d3.drag in 4.0.

Please use Stack Overflow tag d3.js to ask for help. Although I make an effort to assist everyone that asks, I am not always available to provide help promptly or directly. Stack Overflow provides a better collaborative forum for self-help: tens of thousands of D3-related questions have already been asked there, and some answered questions may be relevant to you.

When asking for help, please include a link to a live example that demonstrates the issue, preferably on bl.ocks.org. It is often impossible to debug from code snippets alone. Isolate the issue and reduce your code as much as possible before asking for help. The less code you post, the easier it is for someone to debug, and the more likely you are to get a helpful response.

If you have a question about D3’s behavior and want to discuss it with other users, also consider the d3-js Google Group or joining the d3-js Slack.

Thank you! 🤗