个人中心
gpt4 book ai didi

javascript - D3.js 不会拖动+尝试聚焦

转载 作者：行者123 更新时间：2023-12-03 08:48:39 25 4
gpt4 key购买 nike

我正在进行一个简单的 D3 测试，但由于某种原因我无法拖动我的节点。引用这个例子:( http://bl.ocks.org/mbostock/1804919 )我想要的是我的每个节点启动并停留在它们的起始位置，但就像在示例中我希望节点是可拖动的，并且当它们被释放时返回到它们的起始位置地方。我缺少什么？ 

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .Properties{
        fill: green;
        stroke: black;
        stroke-width: 2px;
    }
    svg {
      background-color: #FFF;
      cursor: default;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
        var width = 960, height = 500, colors = d3.scale.category10();
        var svg = null, force = null;
        var circle = null, path = null;
        var nodes = null, links = null;
        var nodesArray = null, linkArray = null;
        var count = 0;
        var element = "body"; var numEdges = 2, numNodes = 5;
        var i = 0; var L = 16, r = 12, lineLimit = 10;
        var d = 2 * r + L;
        var R = (count - 1) * d;
        var m = width / 2;
        var X;
        var drag = d3.behavior.drag();
        svg = d3.selectAll(element).append('svg').attr('width', width).attr('height', height);
        nodes = d3.range(numNodes).map(function () {
            X = m - (R / 2) + (i * d);
            ++i;
            return {
                x: X,
                y: (height) / 3,
                fx: X,
                fy: height / 3,
                id: i-1,
                reflexive: true
            };           
        });
        for (var i = 0; i < numNodes; ++i) {
            d3.select(element).append("h3").text("Node " + i + ": " + nodes[i].id);
        }

        i = -1;
        links = d3.range(numEdges).map(function () {
            i++;
            return {
                //
                source: nodes[i],
                target: nodes[i+1],
                left: false,
                right: true
            }
        });
        for (var i = 0; i < numEdges; ++i) {
            d3.select(element).append("h3").text("Source: " + links[i].source.id + " Target: " + links[i].target.id);
        }

        force = d3.layout.force().size([width, height]).nodes(nodes).links(links).linkDistance(40).linkStrength(0.1).charge(-300);

        linkArray = svg.selectAll('.link').data(links).enter().append('line').attr('class', 'link')
            .attr('x1', function (d) {
                return nodes[d.source.id].x;
            })
            .attr('y1', function (d) { return nodes[d.source.id].y; })
            .attr('x2', function (d) { return nodes[d.target.id].x; })
            .attr('y2', function (d) { return nodes[d.target.id].y; });

        nodeArray = svg.selectAll("circle").data(nodes).enter().append('circle').attr('class', "Properties").attr('r', 12)
            .attr('cx', function (d) { return d.x })
            .attr('cy', function (d) { return d.y })
            .style('cursor', 'pointer').call(drag);

        force.on('tick', tick);
        force.start();

        //Move Nodes towards focus
        function gravity(alpha) {
            return function (d) {
                d.y += (d.fy - d.y) * alpha;
                d.x += (d.fx - d.x) * alpha;
            };
        }

        function tick() {
            alert("in Stepforce" + nodeArray[1].id);

            nodeArray
                .attr('cx', function (d) { return d.x; })
                .attr('cy', function (d) { return d.y; })
                .each(gravity(.2 * e.alpha));

            linkArray.attr('x1', function (d) {
                return d.source.x;
            })
            .attr('y1', function (d) { return d.source.y; })
            .attr('x2', function (d) { return d.target.x; })
            .attr('y2', function (d) { return d.target.y; });
        }

</script>

最佳答案

您缺少将拖动事件链接到 drag 变量。你必须call functions for the dragstart, drag, and dragend events.

在您的具体情况下，您希望 (1) 记录圆的初始位置，(2) 根据鼠标的位置平移圆，以及 (3) 当鼠标移动时将圆返回到其原始位置。拖动结束。

例如:

var drag = d3.behavior.drag()
  .on('dragstart', dragstart) // when the drag starts, call dragstart()
  .on('drag', drag) // during drag, call drag()
  .on('dragend', dragend); // call dragend() on release

var originalPosition;
function dragstart() {
    // store starting coordinates
    originalPosition = d3.mouse(this); // returns array with x and y coords -> [x, y]
}

function drag() {
    var m = d3.mouse(this);
    // make the circle's coordinates match those of the mouse
    d3.select(this)
      .attr('cx', m[0])
      .attr('cy', m[1]);
}

function dragend() {
    // send circle back to original position
    d3.select(this)
      .attr('cx', originalPosition[0])
      .attr('cy', originalPosition[1]);
}

您还可以在更改 dragend() 中的属性之前添加 transition()，以将它们动画回到起始位置。此外，您可能希望将圆圈发送回其原始坐标，而不是开始拖动时鼠标的位置。不过，这应该可以帮助您入门。

关于javascript - D3.js 不会拖动+尝试聚焦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32772831/

25 4 0
文章推荐： javascript - AngularJS中如何解决跨域访问
文章推荐： azure-devops-rest-api - 使用 REST API 将构建链接添加到工作项
文章推荐： python - readthedocs 上的 nbsphinx 语法突出显示
文章推荐： javascript - 将 onclick 与 Google Analytics 结合使用并在新选项卡中打开
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com