3.1 Interactividad: Eventos del mouse II / gefero

Sociologist (with background in statistical modelling, machine learning and data science). Someone said "Data Sociologist"... I like it.

Workspace

Public

TP 5. Interactividad

Edited

Apr 26, 2023

1 fork

1 star

TP 5. Interactividad

3.0 Interactividad: Eventos del mouse I

3.1 Interactividad: Eventos del mouse II

3.2 Tooltips 3.3 Brushing

coleccion_de_circulos = [

{"eje_x":50 , "eje_y":45, "radio":22, "color":"#ffbe0b"},

{"eje_x":40, "eje_y":125, "radio":32, "color":"#fb5607"},

{"eje_x":180, "eje_y":155, "radio":43, "color":"#ff006e"},

{"eje_x":160, "eje_y":50, "radio":32, "color":"#8338ec"},

{"eje_x":110, "eje_y":100, "radio":22, "color":"#3a86ff" }

];

{

// 1. Creación de un área de dibujo

const svg = d3.create("svg")

.attr("width",width)

.attr("height",height);

// 2. Asociamos la colección de círculos a componentes gráficos "circle"

var circulos = svg.selectAll("circle")

.data(coleccion_de_circulos)

.enter()

.append("circle");

// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo

// para setear las propiedades cx, cy, r y fill del componente HTML circle

circulos.attr("cx", function(d) {return d.eje_x;} )

.attr("cy", function(d) {return d.eje_y;} )

.attr("r" , function(d) {return d.radio;} )

.style("fill", function(d) { return d.color;})

// Tenemos que definir 3 funciones para poder hacer efectivo el drag-and-drop

// d3 se encarga de asociar estas funciones internamente a cada componente

.call(d3.drag()

.on("start", dragstarted)

.on("drag", dragged)

.on("end", dragended))

// 4. Retornamos el canvas

return svg.node();

}

// Acción al iniciar el drag, en este caso, cambiar el color y el ancho del borde del círculo

// .rise() tra el elemento al frente. Prueben qué ocurre si eliminan el .rise()

function dragstarted(d) {

d3.select(this).raise().attr("stroke", "#FFFFFF").attr("stroke-width",3).attr("stroke-dasharray",4);

}

// Acción durante el drag, en este caso, cambiar la posición del círculo. Noten que estamos cambiando el arreglo de datos con la información proveniente del evento del mouse d3.event.x / d3.event.y

function dragged(d) {

d3.select(this).attr("cx", d.eje_x = d3.event.x).attr("cy", d.eje_y = d3.event.y);

}

// Acción al finalizar el drag, en este caso, borrar la línea punteada que creamos alrededor del círculo para indicar al usuario que tenía el control sobre su posición

function dragended(d) {

d3.select(this).attr("stroke", null);

}

{

// 1. Creación de un área de dibujo

const svg = d3.create("svg")

.attr("width",width)

.attr("height",height);

// 2. Asociamos la colección de círculos a componentes gráficos "circle"

var circulos = svg.selectAll("circle")

.data(coleccion_de_circulos)

.enter()

.append("circle");

// 3. Le decimos al área de dibujo que queremos poder hacer zoom con los círculos.

// d3.zoom() facilita la tarea de agregar esta funcionalidad:

svg.call(d3.zoom()

.extent([[0, 0], [width, height]]) // El área zoomeable

.scaleExtent([1, 8]) // Minimo y máximo factor de escala posible

.on("zoom", function() {

circulos.attr("transform", d3.event.transform); // d3.event contiene la información del evento actual y el .transform aplica la transformación: al punto (x,y) le aplica la escala seleccionada

}));

// 4. Le decimos a d3 cómo utilizar la información disponible en el arreglo