html D3byEX 8.4：拖放（适应D3.js v4）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html D3byEX 8.4：拖放（适应D3.js v4）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <meta charset=utf-8>
<head>
    <meta name="description" content="D3.js v4, drag circles" />
</head>
<body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <script>
        var width = 450, height = 450, radius = 50;
        var svg = d3.select('body')
                    .append('svg')
                    .attrs({ width: width, height: height });

        var data = [
            [width / 2 - radius, height / 2 - radius],
            [width / 2 - radius, height / 2 + radius],
            [width / 2 + radius, height / 2 - radius],
            [width / 2 + radius, height / 2 + radius]
        ];

        var colors = d3.scaleOrdinal(d3.schemeCategory10);

        var circles = svg.selectAll('circle')
                         .data(data)
                         .enter()
                         .append('circle')
                         .attrs({r: radius, fill: colors,
                             transform: function (d) {
                                 return 'translate(' + d + ')'
                             }
                         });

        var dragBehavior = d3.drag().on('drag', onDrag);
        circles.call(dragBehavior);

        function onDrag(d) {
            var x = d3.event.x, y = d3.event.y;

            if ((x >= radius) && (x <= width - radius) &&
                (y >= radius) && (y <= height - radius)) {
                d3.select(this)
                    .attr('transform', function () {
                        return 'translate(' + x + ', ' + y + ')';
                    });
            }
        }
    </script>
</body>
</html>

以上是关于html D3byEX 8.4：拖放（适应D3.js v4）的主要内容，如果未能解决你的问题，请参考以下文章

html D3byEX 9.9：环形图（适应D3.js v4）

html D3byEX 7.3：延迟转换（适应D3.js v4）

html D3byEX 7.1：动画颜色（适应D3.js v4）

html D3byEX 6.4：气泡图（适应D3.js v4）

html D3byEX 6.3：网格线（适应D3.js v4）

html D3byEX 5.8：范围频带（适应D3.js v4）