¿Cómo aplicar el comportamiento de arrastre a un d3.svg.arc?

¿Cómo aplico d3.behavior.drag() al siguiente arco?

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(45 * (pi/180)) //converting from degs to radians
    .endAngle(3) //just radians

vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")

Quiero poder arrastrar el arco alrededor. No he podido ver nada que use el comportamiento de arrastre en ningún objeto basado en la ruta SVG (solo para elementos básicos como círculo, rectángulo, etc.)

Lo más cercano que puedo encontrar relacionado con arrastrar es esto: http://bl.ocks.org/mbostock/1557377

Aunque parece que si intenta ".on("drag", dragmove) para la ruta adjunta (.append("path")) "d" aparece como indefinida. Y si adjunta ".on("drag" , dragmove)" al arco en sí, el evento no parece dispararse...)

preguntado el 08 de marzo de 13 a las 21:03

1 Respuestas

Arrastrar es un comportamiento que crea y luego aplica a los elementos que desea ejecutar ese comportamiento. No debería haber ningún problema al aplicarlo a un arco.

Entonces, con su arco (modificación menor para que la traducción sea accesible):

var position = [200,200];

var arc = vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(" + position + ")");

Comience por crear el comportamiento que desea. Nuestro arrastre actualizará la traducción del arco:

var drag = d3.behavior.drag()
    .on("drag", function(d,i) {
        position[0] += d3.event.dx;
        position[1] += d3.event.dy;
        d3.select(this)
        .attr("transform", function(d,i){
            return "translate(" + position + ")"
        })
    });

Ahora adjuntamos el comportamiento al arco:

arc.call(drag);

Puedes probarlo tu mismo aquí.

respondido 08 mar '13, 23:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.