Soy principiante con D3 y estoy tratando de arrastrar con el mouse un rectángulo, pero en realidad tengo algunos problemas.
Si defino var drag antes de llamarlo, aparece este error: No se puede leer la propiedad 'arrastrar' de indefinido
Si defino var drag después de llamarlo, obtengo un error diferente: No se puede leer la propiedad 'aplicar' de undefined Pero en realidad, al buscar en stackoverflow leí que para resolver este problema necesito definir var drag antes de llamarlo y estoy en un bucle
A continuación puedes ver mi código. Gracias por adelantado.
$(document).ready(function() { var width = 500; var height = 500; var fullAngle = 2 * Math.PI; var arc2 = d3.arc() .innerRadius(195) .outerRadius(200) .startAngle(0.18) .endAngle(fullAngle / 1.02); var svgContainer = d3.select("#container") .append("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid"); var group1 = svgContainer.append("g"); var group2 = svgContainer.append("g"); group2.append("path") .attr("d", arc2()) .attr("fill", "blue") group1.attr("transform", "translate(" + 200 + "," + 200 + ")"); group2.attr("transform", "translate(" + 250 + "," + 250 + ")"); var rectangle = svgContainer.append("rect") .attr("x", 150) .attr("y", 50) .attr("width", 30) .attr('class', 'rectangle') .attr("height", 70) .call(drag) var drag = d3.behavior.drag().on('drag', function () { var obj = svgContainer.append("rect") dragMove(this, obj, 'rect') }); }); function setPoints(obj, prop) { obj[prop] = [] var k = 0 d3.selectAll('.rect') .each(function() { var c = d3.select(this) var cX = d3.transform(c.attr('transform')).translate[0] var cY = d3.transform(c.attr('transform')).translate[1] obj[prop].push({ x: cX, y: cY, index: k++ }) }) } function dragMove(rectangle, obj, prop) { var x = d3.event.x var y = d3.event.y setPoints(obj, prop) d3.select(rectangle).attr('transform', 'translate(' + x + ',' + y + ')') $scope.$apply() }Está utilizando d3 v4 en su código.
d3.behavior.drag() se cambia a d3.drag su función debería ser así y declararse antes de su uso
var drag = d3.drag().on("drag", function () { d3.event.sourceEvent.stopPropagation(); // silence other listeners dragMove(this, obj, 'points') })Implemente su función dragMove para continuar Ver este VIOLÍN
Está utilizando D3 v4 y, como muchas otras cosas, se ha cambiado el nombre del comportamiento de arrastre. Desde el registro de cambios :
Se ha cambiado el nombre del comportamiento de arrastre d3.behavior.drag a d3.drag.
Debe ajustar su código para este cambio de nombre.
var drag = d3.drag().on('drag', function () { dragMove(this, obj, 'points') });Dado que la implementación también cambió, es posible que se requieran otros cambios para que realmente funcione. Sin embargo, esto no está claro en el código que proporcionó y valdrá la pena otra pregunta.