From 52aa18465611ccbeb77b352bf98afbb8f108b78e Mon Sep 17 00:00:00 2001 From: yikth Date: Mon, 31 Aug 2020 14:09:54 +0800 Subject: [PATCH] draw axes --- playground/scatterplot.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/playground/scatterplot.js b/playground/scatterplot.js index ed08986..f44987f 100644 --- a/playground/scatterplot.js +++ b/playground/scatterplot.js @@ -3,16 +3,18 @@ var dataset = [ [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; -const WIDTH = 600 -const HEIGHT = 600 +const WIDTH = 600; +const HEIGHT = 600; +const PADDING = 20; +// setup data scaling to fit view var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[0])]) - .range([0, WIDTH]); + .range([PADDING, WIDTH - PADDING]); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, d => d[1])]) - .range([0, HEIGHT]); + .range([HEIGHT - PADDING, PADDING]); // Create SVG element var svg = d3.select("body") @@ -39,4 +41,16 @@ svg.selectAll("text") .attr("y", pt => yScale(pt[1])) .attr("font-family", "sans-serif") .attr("font-size", "11px") - .attr("fill", "red"); \ No newline at end of file + .attr("fill", "red"); + +// create axes +// x axis +svg.append("g") + .attr("transform", `translate(0,${HEIGHT-PADDING})`) + .call(d3.axisBottom() + .scale(xScale)); +// y axis +svg.append("g") + .attr("transform", `translate(${PADDING},0)`) + .call(d3.axisLeft() + .scale(yScale)); \ No newline at end of file