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:
Je vous mets aussi comment sont déclarer les paramètres de la fonction:Code:
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) }
brush:
Code:
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):
line:Code:
1
2 var focus = svg.append("g") .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");
xFocusCode:
1
2
3
4 d3.line() .x(function(d) { return x(d.date);}) .y(function(d) { return y(d.count);}) .curve(d3.curveBasisOpen)
xContextCode:var xFocus = d3.scaleTime().range([0, widthFocus]);
xAxisCode:var xContext = d3.scaleTime().range([0, widthContext]);
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.Code:var xAxisFocus = d3.axisBottom(xFocus).tickFormat(localization.getFormattedDate);
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 :/
