D3js / AngularJS - 拖动和数据绑定rect的坐标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3js / AngularJS - 拖动和数据绑定rect的坐标相关的知识，希望对你有一定的参考价值。
我想绑定rect的坐标x，y。（记为“坐标”）。并拖动矩形，希望记录（坐标x，y）同步变化。
以下是代码的一部分。（完整代码jsbin）
html
<tr ng-repeat="item in data">
<td>({{ item.x }}, {{ item.y }})</td>
<td>{{ item.width }}</td>
<td>{{ item.height }}</td>
</tr>
JS
$scope.data = [{ 'x': 30, 'y': 50, 'width': 90, 'height': 70 }];
var drag = d3.drag()
.on('drag', function (d) {
d3.select(this)
.attr('x', d.x = d3.event.x)
.attr('y', d.y = d3.event.y)
})
.on('end', function (d) {
//update coordinate x ,y to array
arrayNum = this.id;
$scope.data.splice(arrayNum, 1, { 'x': d.x, 'y': d.y, 'width': d.width, 'height': d.height });
console.log($scope.data);
});
我还有$ scope.data.splice来更新数组。它确实更新了$ scope.data。但它不适用于浏览器视图。我怎么修改？或者我可以参考什么？非常感谢！
答案
似乎angular不知道它的范围是由d3事件更新的。
我将$scope.$apply()添加到您的on end处理程序中，并在每个拖动事件完成后按预期在视图中显示更新。
var mainApp = angular.module("mainApp", []);
mainApp.controller('Controller', function($scope) {
$scope.data = [{
'x': 30,
'y': 50,
'width': 90,
'height': 70
}];
var drag = d3.drag()
.on('drag', function(d) {
d3.select(this)
.attr('x', d.x = d3.event.x)
.attr('y', d.y = d3.event.y)
})
.on('end', function(d) {
arrayNum = this.id;
// Ensure angular knows about the update to its scope
$scope.$apply(function() {
//update coordinate x ,y to array
$scope.data.splice(arrayNum, 1, {
'x': d.x,
'y': d.y,
'width': d.width,
'height': d.height
});
});
console.log($scope.data);
});
//create SVG
var svg = d3.select('.Content')
.append('svg')
.attr('width', 300)
.attr('height', 300)
.style('border', '1px solid #000');
var container = svg.append('g');
container.append('svg:image')
.attr('xlink:href', 'dog.jpg')
.attr('x', 0)
.attr('y', 0);
container.data($scope.data)
.append('rect')
.attr('x', function(d) {
return d.x;
})
.attr('y', function(d) {
return d.y;
})
.attr('width', function(d) {
return d.width;
})
.attr('height', function(d) {
return d.height;
})
.attr('id', function(d, i) {
return i;
})
.style('cursor', 'pointer')
.call(drag);
});以上是关于D3js / AngularJS - 拖动和数据绑定rect的坐标的主要内容，如果未能解决你的问题，请参考以下文章
使用 foreignObject 在 d3js 强制布局中制作 contenteditable 标签并在 Chrome 上拖动