xxxxxxxxxx<html> <head> <title>axis.tickSizeOuter</title> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="d3-axis.js"></script> <style> .axis .domain { stroke-width: 9px; stroke: #6ce2e9; } </style> </head> <body> <svg width="960" height="500"></svg> <script> const xValue = d => d.sepalLength; const yValue = d => d.petalLength; const margin = {top: 50, right: 30, bottom: 50, left: 63}; const svg = d3.select("svg"); const width = +svg.attr("width"); const height = +svg.attr("height"); const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const xScale = d3.scaleLinear().range([0, innerWidth]); const yScale = d3.scaleLinear().range([innerHeight, 0]); const xAxis = d3.axisBottom() .scale(xScale) .tickSizeOuter(0); const yAxis = d3.axisLeft() .scale(yScale) .ticks(5) .tickSizeOuter(0); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xAxisG = g.append("g") .attr("class", "axis") .attr("transform", `translate(0, ${innerHeight})`); const yAxisG = g.append("g") .attr("class", "axis"); function render(data){ xScale.domain(d3.extent(data, xValue)); yScale.domain(d3.extent(data, yValue)); xAxisG.call(xAxis); yAxisG.call(yAxis); const circles = g.selectAll("circle").data(data); circles.exit().remove(); circles .enter().append("circle") .attr("r", 5) .merge(circles) .attr("cx", d => xScale(xValue(d))) .attr("cy", d => yScale(yValue(d))); } function type(d){ d.sepalLength = +d.sepalLength; d.sepalWidth = +d.sepalWidth; d.petalLength = +d.petalLength; d.petalWidth = +d.petalWidth; return d; } d3.csv("iris.csv", type, render); </script> </body></html> https://d3js.org/d3.v4.min.js