Comment définir un xaxis statique et un axe y, javascript d3

L'axe x et l'axe y dépendent des valeurs indiquées dans le tableau, chacun d'eux part de la valeur min et s'arrête dans la valeur max. Peut-on changer la segmentation pour être indépendant des valeurs utilisateur?

<!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .point { fill: steelblue; stroke: #000; } </style> <body> <script src="http://d3js.org/d3.v2.js?2.9.6"></script> <script> var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv("data.csv", function(data) { // Coerce the strings to numbers. data.forEach(function(d) { dx = +dx; dy = +dy; }); // Compute the scales' domains. x.domain(d3.extent(data, function(d) { return dx; })).nice(); y.domain(d3.extent(data, function(d) { return dy; })).nice(); // Add the x-axis. svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.svg.axis().scale(x).orient("bottom")); // Add the y-axis. svg.append("g") .attr("class", "y axis") .call(d3.svg.axis().scale(y).orient("left")); // Add the points! svg.selectAll(".point") .data(data) .enter().append("path") .attr("class", "point") .attr("d", d3.svg.symbol().type("triangle-up")) .attr("transform", function(d) { return "translate(" + x(dx) + "," + y(dy) + ")"; }); }); </script>

Le fichier: data.cvs

 x,y 5,90 25,30 45,50 65,55 85,25

Je pense que vous demandez si vous pouvez définir une gamme personnalisée de tiques ou si vous pouvez définir une plage personnalisée pour chaque axe. Bien, c'est la même réponse, oui.

Vous pouvez personnaliser les marques de repère à l'aide de axis.tickValues([custom range of values)] .

Vous pouvez définir une plage personnalisée pour l'axe dans un appel de domaine. Vous pouvez utiliser une plage personnalisée [0,100] par exemple, telle que publiée ci-dessus vida.io et aussi dans le jsbin , donc .domain([0,100]) . Dans le jsbin, il existe plusieurs autres façons de personnaliser la gamme de l'axe qui est commentée. Il suffit de les allumer et de les recharger pour voir ce qu'ils font. N'oubliez pas de frapper la course avec js dans le coin supérieur droit.

L'utilisation du d3.extent sur les données renvoie le max et le min du tableau comme spécifié dans l'évaluateur.

J'espère que ça répond à ta question.