domain() sets a D3 scale’s input domain: the spectrum of possible data values that the scale maps to an output range. Pass minimum and maximum values in an array for a continuous scale. section 3.4.1
Use domain() to:
- Define continuous limits, such as [0, 250], before mapping values through a linear scale. section 3.4.2
- Set discrete inputs, such as categories or years, when working with band or other discrete-domain scales. section 3.4.1 section 5.1.1
- Choose a theoretical minimum when the visualization should begin at zero, even if the dataset’s smallest value is higher. section 3.4.2
Sizing bars with a linear scale
const xScale = d3.scaleLinear() .domain([0, 1078]) .range([0, 450]); svg.selectAll("rect") .data(data) .join("rect") .attr("width", d => xScale(d.count)); Here, domain() describes the possible count values, while range() reserves 450 pixels for their visual widths. A count of 1,078 maps to 450 pixels; a count of 414 maps to about 172.82 pixels. section 3.4.2
const myScale = d3.scaleLinear() .domain([0, 200]) .range([0, 20]);
A minimal linear-scale configuration shows domain() defining input values before range() maps them to screen values. section 3.4.1
