Salut, je dois implémenter un zoom en passant par un brush avec la bibliothèque D3, voici la fonction ou je dois implémenter cette fonction:
1 2 3 4 5 6 7 8 9
| function brushUpdate(brush, g, line, xFocus, xContext, xAxis, yAxis) {
// mon code actuel:
var s = d3.event.selection || xContext.range();
xContext.domain(s.map(xFocus.invert, xFocus))
g.select(".path").attr("d", line)
g.select(".axis--x").call(xAxis)
g.select(".axis--y").call(yAxis)
} |
Je vous mets aussi comment sont déclarer les paramètres de la fonction:
brush:
1 2 3 4 5
| var brush = d3.brushX()
.extent([[0, 0], [widthContext, heightContext]])
.on("brush", function () {
brushUpdate(brush, focus, lineFocus, xFocus, xContext, xAxisFocus, yAxisFocus);
}); |
focus (renommé "g" dans la fonction):
1 2
| var focus = svg.append("g")
.attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")"); |
line:
1 2 3 4
| d3.line()
.x(function(d) { return x(d.date);})
.y(function(d) { return y(d.count);})
.curve(d3.curveBasisOpen) |
xFocus
var xFocus = d3.scaleTime().range([0, widthFocus]);
xContext
var xContext = d3.scaleTime().range([0, widthContext]);
xAxis
var xAxisFocus = d3.axisBottom(xFocus).tickFormat(localization.getFormattedDate);
Il y a deux graphiques dans mon cas, Context qui est la vue générale qui se trouve en bas de Focus qui est un graphique qui montre ce qui a été sélectionné sur Context. Si vous avez besoin d'autres informations, voici le lien github du projet.
Je dois donc juste mettre à jour les données en x sur Focus, en ne touchant pas à Context ou l'axe y de Focus
J'ai essayé de regarder plusieurs tutos et la doc mais je suis nouveau sur JS et je n'ai pas réussi à faire ce que je voulais, d'ailleurs le code actuel ne fait rien apparemment mais je ne sais pas pourquoi :/
Partager