Discussion :

[isdriai]

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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var focus = svg.append("g")
    .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");

line:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
d3.line()
  .x(function(d) { return x(d.date);})
  .y(function(d) { return y(d.count);})
  .curve(d3.curveBasisOpen)

xFocus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var xFocus = d3.scaleTime().range([0, widthFocus]);

xContext

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var xContext = d3.scaleTime().range([0, widthContext]);

xAxis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :/