Question

调整大小或移动画笔时会更新

visibleData。

我想删除visibleData中不再包含的组（矩形+文本），并从仍属于visibleData的组中更新矩形位置和尺寸：

重绘功能的第一个变体：

var grp = items.selectAll('g')
        .data(visibleData);

var item = grp.enter().append('g')
        .attr('transform', function (d) {
            return 'translate(' + d.x + ', ' + d.y + ')';
        });

item.append('rect')
        .attr('width', rectWidth)
        .attr('height', rectHeight)
        .style('fill', 'gray');

item.append('text')
        .text(function (d) {
            return d.id;
        })
        .attr('x', 10)
        .attr('y', 15);

grp.exit().remove();

第二种变体：

var grp = items.selectAll('g')
        .data(visibleData);

var item = grp.enter().append('g');

item.append('rect')
        .attr('x', function (d) {
            return d.x
        })
        .attr('y', function (d) {
            return d.y;
        })
        .attr('width', rectWidth)
        .attr('height', rectHeight)
        .style('fill', 'gray');

item.append('text')
        .text(function (d) {
            return d.id;
        })
        .attr('x', function (d) {
            return d.x + 5
        })
        .attr('y', function (d) {
            return d.y + 15;
        });

grp.exit().remove();

以下是第一个变体的完整代码：http://jsfiddle.net/vvorm/F62kt/1/

如您所见，从左侧调整画笔时，它们都无法正常工作。我还没有设法更新矩形＆＃39;位置和尺寸，但我认为首先处理拆除更重要。

感谢您的帮助。

Answer 1

使用身份功能解决了我的问题：

.data(vm.visibleData, function (d) {
    return vm.visibleData.indexOf(d);
})

感谢http://orangevolt.blogspot.fr/2013/04/update-d3js-data-using-enterexit-with.html

使用D3删除和更新重绘组

1 个答案: