Bonne façon de dessiner le quadrillage
Bon, je commence à être un peu plus familier avec D3, mais je suis encore un peu floue sur certains points. Je suis en train d'essayer de dessiner les lignes de la grille, mais je suis rendant compte que j'ai peut-être bidouiller rapport à la faire correctement. J'ai essayé d'ajouter quelques lignes de la grille, à l'aide d'un tutoriel, mais a terminé avec beaucoup de code que j'ai l'impression d'être jimmy gréement afin d'obtenir à la ligne correctement. Je me demandais si quelqu'un pourrait m'indiquer une meilleure façon de la rédaction de ce...
Le code d'origine est présent.
<script type="text/javascript">
//Width and height
var w = 800;
var h = 400;
var padding = 20;
var border=1;
var bordercolor='black';
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, -467], [3,-90],[468,481]
];
//create scale functions
var xScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain( [-100, d3.max(dataset, function(d) { return d[1]; })] )
.range([2,5]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("border",border)
;
//define X axis this is rly a function, remember, variables can hold functions in JS
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(1)
.tickSize(-h, 0, 0)
; //Set rough # of ticks
//Define Y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(1)
.tickSize(-w, 0, 0)
;
//create the circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 3);
// draw axes here
svg.append("g")
.attr("class", "axis") //assign "axis" class
.attr("transform", "translate(0," + (h - padding) +")")
.call(xAxis);
svg.append("g")
.attr("class", "axis") //assign "axis" class
.attr("transform", "translate(" + padding + ",0)" )
.call(yAxis);
//end draw axes here
</script>
et le code que j'ai ajouté dans la deuxième lien est ici
var vis = svg.append("svg:g")
.attr("transform", "translate(20,0)")
var rules = vis.append("svg:g").classed("rules", true)
rules.append("svg:g").classed("grid x_grid", true)
.attr("transform", "translate(-20,"+h+")")
.call(d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4)
.tickSize(-h,0,0)
.tickFormat("")
)
rules.append("svg:g").classed("grid y_grid", true)
.call(d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickSize(-w,0,0)
.tickFormat("")
)
rules.append("svg:g").classed("labels x_labels", true)
.attr("transform", "translate(-20,"+ h +")")
.call(d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(4)
.tickSize(0)
.tickFormat("")
//.tickFormat(d3.time.format("%Y/%m"))
)
rules.append("svg:g").classed("labels y_labels", true)
.call(d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickSubdivide(1)
.tickSize(0, 0, 0)
.tickFormat("")
)
Encore, vraiment reconnaissant de toute aide
Vous devez vous connecter pour publier un commentaire.
En supposant que vous avez Mike Bostock de l' standard les marges définie et que vous avez défini une échelle linéaire pour l'axe des y le code suivant va créer horizontal, quadrillage, sans l'aide de
tickSize()
.yScale.ticks
🙂attr
ne semble pas fonctionner avec la v4.....attr
, sauf si vous incluez github.com/d3/d3-selection-multi (qui ne fait pas partie du regroupement par défaut). La solution est simple, il suffit de le décomposer en plusieurs.attr
appels, un pour chaque attribut.Je suggère d'utiliser d3.svg.de l'axe().scale() pour attacher la grille de vos coordonnées. J'ai dessiné un exemple rapide en fonction de votre code: http://jsfiddle.net/temirov/Rt65L/1/
L'essentiel est d'utiliser les échelles existantes, x et y, et à utiliser les tiques comme une grille. Depuis axes x et y sont déjà définis, nous pouvons tout simplement ré-utiliser. Voici le code correspondant:
Vous pouvez utiliser le
ticks()
fonction de votre échelle pour obtenir la tique des valeurs et de l'utiliser ensuite dans un appel de données pour tracer les lignes.Vous préférez peut-être l'aide d'un générateur de ligne pour les lignes de la grille au lieu de créer manuellement le chemin d'accès. Cela fonctionne de la même manière pour y les lignes de la grille, mais seulement que la coordonnée y est constante et varie de 0 à la largeur du graphique. Vous devrez peut-être ajuster les valeurs début et fin pour faire "joli".
Dans le d3fc projet, nous avons créé un le quadrillage de la composante qui rend exactement de la même manière que le D3(v4) de l'axe.
Voici un exemple de l'utilisation:
Qui rend comme suit:
L'espacement entre les lignes du quadrillage est déterminé par les tiques fourni par les associés axes.
Divulgation: je suis un collaborateur principal à l'd3fc projet!
Suivant @arete de l'idée, vous pouvez utiliser les méthodes suivantes pour éviter la ré-dessin inutilement la ligne de quadrillage:
et de définir les lignes suivantes dans votre fichier CSS
Vous pouvez simplement utiliser innerTickSize, au lieu de tickSize: