从D3.js v3迁移到D3.js v4不工作-一个选择问题
Migrating from D3.js v3 to D3.js v4 not working - a select issue?
我正试图将这个JSFiddle从D3 v3迁移到D3 v4,但它不起作用。
我知道D3拖动行为现在只是我改变了d3.drag()
,但是当试图运行它时,它在第53行给出了一个错误:
rect = d3.select(self.rectangleElement[0][0]);
与Chrome显示:
Uncaught TypeError: Cannot read property '0' of undefined
我如何去改变这个JSFiddle,使它运行在D3 v4?
作为D3 v4的选择不再是数组的数组,而是一个对象。
选择不再子类数组使用原型链注入;它们现在是普通对象,提高了性能。
在v3中执行self.rectangleElement[0][0]
时,您正在访问选择中的第一个节点。要在v4中获得这个节点,您需要在self.rectangleElement
上调用selection.node()
。这样你的代码就变成了:
rect = d3.select(self.rectangleElement.node());
查看更新后的JSFiddle,查看其工作版本
首先,为什么要重新选择这些东西?他们已经是你想要的选择。例如,self。rectangleElement是矩形的选择。其次,在版本4中不再支持向.attr传递对象。第三,拖动行为改变了,圆圈正在吞噬你的第二个鼠标。下面是我修复了这些东西的版本:
d3.select('#rectangle').on('click', function(){ new Rectangle(); });
var w = 600, h = 500;
var svg = d3.select('body').append('svg').attr("width", w).attr("height", h);
function Rectangle() {
var self = this, rect, rectData = [], isDown = false, m1, m2, isDrag = false;
svg.on('mousedown', function() {
console.log(isDown);
m1 = d3.mouse(this);
if (!isDown && !isDrag) {
self.rectData = [ { x: m1[0], y: m1[1] }, { x: m1[0], y: m1[1] } ];
self.rectangleElement = d3.select('svg').append('rect').attr('class', 'rectangle').call(dragR);
self.pointElement1 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC1);
self.pointElement2 = d3.select('svg').append('circle').attr('class', 'pointC').call(dragC2);
self.pointElement3 = svg.append('circle').attr('class', 'pointC').call(dragC3);
self.pointElement4 = svg.append('circle').attr('class', 'pointC').call(dragC4);
updateRect();
isDrag = false;
} else {
isDrag = true;
}
isDown = !isDown;
})
.on('mousemove', function() {
m2 = d3.mouse(this);
if(isDown && !isDrag) {
self.rectData[1] = { x: m2[0] - 5, y: m2[1] - 5};
updateRect();
}
});
function updateRect() {
self.rectangleElement
.attr("x", self.rectData[1].x - self.rectData[0].x > 0 ? self.rectData[0].x : self.rectData[1].x)
.attr("y", self.rectData[1].y - self.rectData[0].y > 0 ? self.rectData[0].y : self.rectData[1].y)
.attr("width", Math.abs(self.rectData[1].x - self.rectData[0].x))
.attr("height", Math.abs(self.rectData[1].y - self.rectData[0].y));
var point1 = self.pointElement1.data(self.rectData);
point1.attr('r', 5)
.attr('cx', self.rectData[0].x)
.attr('cy', self.rectData[0].y);
var point2 = self.pointElement2.data(self.rectData);
point2.attr('r', 5)
.attr('cx', self.rectData[1].x)
.attr('cy', self.rectData[1].y);
var point3 = self.pointElement3.data(self.rectData);
point3.attr('r', 5)
.attr('cx', self.rectData[1].x)
.attr('cy', self.rectData[0].y);
var point3 = self.pointElement4.data(self.rectData);
point3.attr('r', 5)
.attr('cx', self.rectData[0].x)
.attr('cy', self.rectData[1].y);
}
var dragR = d3.drag().on('drag', dragRect);
function dragRect() {
var e = d3.event;
for(var i = 0; i < self.rectData.length; i++){
self.rectangleElement
.attr('x', self.rectData[i].x += e.dx )
.attr('y', self.rectData[i].y += e.dy );
}
self.rectangleElement.style('cursor', 'move');
updateRect();
}
var dragC1 = d3.drag().on('drag', dragPoint1);
var dragC2 = d3.drag().on('drag', dragPoint2);
var dragC3 = d3.drag().on('drag', dragPoint3);
var dragC4 = d3.drag().on('drag', dragPoint4);
function dragPoint1() {
var e = d3.event;
self.pointElement1
.attr('cx', function(d) { return d.x += e.dx })
.attr('cy', function(d) { return d.y += e.dy });
updateRect();
}
function dragPoint2() {
var e = d3.event;
self.pointElement2
.attr('cx', self.rectData[1].x += e.dx )
.attr('cy', self.rectData[1].y += e.dy );
updateRect();
}
function dragPoint3() {
var e = d3.event;
self.pointElement3
.attr('cx', self.rectData[1].x += e.dx )
.attr('cy', self.rectData[0].y += e.dy );
updateRect();
}
function dragPoint4() {
var e = d3.event;
self.pointElement4
.attr('cx', self.rectData[0].x += e.dx )
.attr('cy', self.rectData[1].y += e.dy );
updateRect();
}
}//end Rectangle
svg {
border: solid 1px red;
}
rect {
fill: lightblue;
stroke: blue;
stroke-width: 2px;
}
<button id='rectangle'>Rectangle</button>
<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>
相关文章:
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG,但不显示任何内容
- d3.js:限制画笔的大小
- d3.js用按钮更新条形图工具提示
- 如何为d3.js图表输出组织/嵌套数据
- d3-js快速事件调用问题
- D3.JS向rect添加缩放和列表项
- d3.js圆的半径是否可以由样式属性指定
- 如何在d3.js中自定义事件侦听器
- 在新窗口上使用d3.js
- 如何用d3.js绘制折线图
- 使用dc.js、d3.js和crossfilter引用错误
- D3.js剪辑路径截断了我的图的边缘
- D3.js和坐标系