javascript - framework - jquery d3
Gráfico de líneas de arrastre d3 v4 con ejes xey (1)
d3.event mantiene las posiciones de píxeles, pero su trama está impulsada por coordenadas de espacio de usuario. Por lo tanto, debe convertir esas posiciones de píxeles en espacio de usuario. Puedes usar tu método de inversión de escalas para hacerlo.
function dragged(d) {
d[0] = x.invert(d3.event.x); // convert to user-space
d[1] = y.invert(d3.event.y);
d3.select(this)
.attr(''cx'', x(d[0])) // back to pixels
.attr(''cy'', y(d[1]))
focus.select(''path'').attr(''d'', line); //line does pixel conversion too
}
Código de ejecución:
<!DOCTYPE html>
<svg width="500" height="350"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
let points = d3.range(1, 10).map(function(i) {
return [i * width / 10, 50 + Math.random() * (height - 100)];
});
var x = d3.scaleLinear()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y);
var line = d3.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
let drag = d3.drag()
.on(''start'', dragstarted)
.on(''drag'', dragged)
.on(''end'', dragended);
svg.append(''rect'')
.attr(''class'', ''zoom'')
.attr(''cursor'', ''move'')
.attr(''fill'', ''none'')
.attr(''pointer-events'', ''all'')
.attr(''width'', width)
.attr(''height'', height)
.attr(''transform'', ''translate('' + margin.left + '','' + margin.top + '')'')
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(points, function(d) { return d[0]; }));
y.domain(d3.extent(points, function(d) { return d[1]; }));
focus.append("path")
.datum(points)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
focus.selectAll(''circle'')
.data(points)
.enter()
.append(''circle'')
.attr(''r'', 5.0)
.attr(''cx'', function(d) { return x(d[0]); })
.attr(''cy'', function(d) { return y(d[1]); })
.style(''cursor'', ''pointer'')
.style(''fill'', ''steelblue'');
focus.selectAll(''circle'')
.call(drag);
focus.append(''g'')
.attr(''class'', ''axis axis--x'')
.attr(''transform'', ''translate(0,'' + height + '')'')
.call(xAxis);
focus.append(''g'')
.attr(''class'', ''axis axis--y'')
.call(yAxis);
function dragstarted(d) {
d3.select(this).raise().classed(''active'', true);
}
function dragged(d) {
d[0] = x.invert(d3.event.x);
d[1] = y.invert(d3.event.y);
d3.select(this)
.attr(''cx'', x(d[0]))
.attr(''cy'', y(d[1]))
focus.select(''path'').attr(''d'', line);
}
function dragended(d) {
d3.select(this).classed(''active'', false);
}
</script>
Soy nuevo en d3.js. Quería arrastrar un gráfico de líneas usando sus puntos. Está funcionando bien sin los ejes xey. He usado este ejemplo como referencia: https://bl.ocks.org/mbostock/4342190
Con los ejes en el gráfico de líneas, la línea no está trazando correctamente. Por favor, eche un vistazo al fragmento a continuación.
Gracias por adelantado.
<!DOCTYPE html>
<svg width="500" height="350"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
let points = d3.range(1, 10).map(function(i) {
return [i * width / 10, 50 + Math.random() * (height - 100)];
});
var x = d3.scaleLinear()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var xAxis = d3.axisBottom(x),
yAxis = d3.axisLeft(y);
var line = d3.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
let drag = d3.drag()
.on(''start'', dragstarted)
.on(''drag'', dragged)
.on(''end'', dragended);
svg.append(''rect'')
.attr(''class'', ''zoom'')
.attr(''cursor'', ''move'')
.attr(''fill'', ''none'')
.attr(''pointer-events'', ''all'')
.attr(''width'', width)
.attr(''height'', height)
.attr(''transform'', ''translate('' + margin.left + '','' + margin.top + '')'')
var focus = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(d3.extent(points, function(d) { return d[0]; }));
y.domain(d3.extent(points, function(d) { return d[1]; }));
focus.append("path")
.datum(points)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
focus.selectAll(''circle'')
.data(points)
.enter()
.append(''circle'')
.attr(''r'', 5.0)
.attr(''cx'', function(d) { return x(d[0]); })
.attr(''cy'', function(d) { return y(d[1]); })
.style(''cursor'', ''pointer'')
.style(''fill'', ''steelblue'');
focus.selectAll(''circle'')
.call(drag);
focus.append(''g'')
.attr(''class'', ''axis axis--x'')
.attr(''transform'', ''translate(0,'' + height + '')'')
.call(xAxis);
focus.append(''g'')
.attr(''class'', ''axis axis--y'')
.call(yAxis);
function dragstarted(d) {
d3.select(this).raise().classed(''active'', true);
}
function dragged(d) {
d3.select(this)
.attr(''cx'', d[0] = d3.event.x)
.attr(''cy'', d[1] = d3.event.y)
focus.select(''path'').attr(''d'', line);
}
function dragended(d) {
d3.select(this).classed(''active'', false);
}
</script>