C'est la première fois que j'utilise d3.js, alors soyez patient. Je l'ai implémenté en JavaScript pur dans un fichier vue.js. J'essaie de créer un nuage de points avec une fonctionnalité de zoom. Jusqu'à présent, presque tout fonctionne bien, mais lorsque je zoome, je remarque que l'axe des x n'est pas mis à l'échelle correctement, mais que l'axe des y fonctionne bien. Par exemple, lorsque vous regardez le graphique d'origine, un point peut se trouver autour de 625 sur l'axe des X, mais le même point sera plus petit que 600 lors d'un zoom avant. Cela ne se produit pas sur l'axe y - les points sont correctement mis à l'échelle. Je suppose qu'il y a quelque chose qui ne va pas avec la mise à l'échelle de l'axe des x dans la fonction de mise à l'échelle, mais je n'arrive pas à le comprendre. S'il vous plaît, jetez un œil et faites-moi savoir si vous voyez où je me trompe.

EDIT : je dois mentionner que cela utilise d3.js version 7.4.4

Fait intéressant, le problème a semblé se résoudre de lui-même après avoir défini la zone de découpage pour empêcher l'affichage des points en dehors de l'axe. Voici comment je crée le chemin de détourage :

// clip path var clip = svg.append("defs").append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("id", "clip-rect") .attr("x", "0") .attr("y", "0") .attr('width', chart_dx) .attr('height', chart_dy);

J'ai ensuite ajouté cet attribut au svg lors du traçage des données comme ceci :

svg.append("g").attr("clip-path", "url(#clip)")

Chemin de détourage mis à jour avec la section de données de dessin :

// clip path var clip = svg.append("defs").append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("id", "clip-rect") .attr("x", "0") .attr("y", "0") .attr('width', chart_dx) .attr('height', chart_dy); // plot data var circles = svg.append("g") .attr("id", "circles") .attr("transform", "translate(75, 0)") .attr("clip-path", "url(#clip)") //added here .selectAll("circle") .data(d) .enter() .append("circle") .attr("r", 4) .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .style("fill", function(d) { var norm_color = colorScale(d[1]); return d3.interpolateInferno(norm_color) });