D3：基于 svg 元素操作更改数据

Question

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

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

我需要更新链接到放置事件中的圆的 DATUM。反过来也很简单，因为当您更改数据时，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
        }
    }
}

Answer 1

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

D3：基于 svg 元素操作更改数据

D3: change data based on svg element manipulation

javascript

drag-and-drop

d3.js