D3：根据 svg 元素操作更改数据答案

【问题标题】：D3: change data based on svg element manipulationD3：根据 svg 元素操作更改数据
【发布时间】：2015-09-11 23:31:47
【问题描述】：

我是 [d3.js][1] 的新手，所以我的问题可能很愚蠢。

我将我的 svg 划分为多个区域，并添加了圆圈供用户拖动。每个区域都有一个 id，每个圆圈都有创建它的区域的 id。

我需要的是更新 DATUM 链接到 drop 事件中的圆圈。反过来也很简单，因为当您更改数据时，update() 事件会完成所有工作。但是有没有办法让 svg 元素改变数据？

编辑：

一些代码。我进行了编辑，使其更清晰，更直接。圆圈调用拖动对象，一切正常，但 TODO 部分需要......嗯......完成：

var drag;
function configDrag () {
    drag = d3.behavior.drag();
    drag.on("dragstart", function() {
            d3.event.sourceEvent.stopPropagation();
        })
        .origin(function(d){
            return d;
        })
        .on("dragstart", draggrab)
        .on("drag", dragmove)
        .on("dragend", dragdrop);
}

function dragdrop(d){
    reg = regionOf(d.x, d.y);    // null if in undefined region
    if(reg){
        d3.select(this)
            .attr("cy", parseInt(reg.y1 + reg.y2) / 2);

        var regionId = getRegionId(d.x, d.y);
        // TODO update data.tsv with regionId
        }
    }
}

【问题讨论】：

当然，您使用的是d3.behaviour.drag吗？你能发布一些代码来展示你的 drop 事件是如何工作的吗？
@CoolBlue 完成。谢谢。
好吧，还有很多想象空间，但我假设 data.tsv 是绑定到被拖动元素的数组，在这种情况下 d 是该数组的一个元素，所以你只需要把regionID放在上面。可以使用 d3.mouse 推断新区域，这将为您提供鼠标相对于容器元素的位置。所有这些都可以作为方法添加到您的 data.tsv 元素中。
哇。正如我所说，这是一个初学者的问题。我在不知道它的目的的情况下使用了 d 参数。我已经在模板上看到了它，而且它确实有效，超出了当时的需要。谢谢你的解释。顺便说一句，它做到了。如果您愿意，请发表您的评论作为答案，让我将其标记为已解决。

标签： javascript d3.js drag-and-drop

【解决方案1】：

当您使用selection.data(values) 将数据绑定到选择时，values 始终是一个数组，通常是一个由object 元素组成的数组。这些元素或对它们的引用绑定到 DOM 元素，并且可以使用selection.datum() 检索。它们也是 d 参数，通常是各种 d3 运算符方法传递回调的第一个参数。因为它们是对象，所以当您更改其成员的值时，您正在更改绑定的原始 values 数组中关联元素的成员的值。

【讨论】：