d3 scale axis
tags: d3
| method | format | Explanation |
|---|---|---|
| axisTop | d3.axisTop() | Scale value generated in the scale above |
| axisBottom | d3.axisBottom() | Generating a scale value of the scale at the bottom |
| axisLeft | d3.axisLeft() | Generating a scale value of the scale on the left |
| axisRight | d3.axisRight() | Generating a scale value of the scale on the right |
| scale | d3.axisTop().scale(scaleLinear) | Scale generated by the scale |
| ticks | ticks(num) | The scale is divided into sub-num, num minutes but not necessarily |
| tickValues | tickValues[0,1,3,5] | Display only scale values in this array |
| tickFormat | tickFormat(fn) | Formatting scale value display, similar to the format echarts |
| tickSize | tickSize(num) | The size of the tick marks |
| tickSizeInner | tickSizeInner(num) | Tick size intermediate portion |
| tickSizeOuter | tickSizeOuter(num) | Two edge tick size |
| tickPadding | tickPadding(num) | And the interval between the scale values of the scale lines |
| tickArguments | 。。。 | Temporarily seemingly useless |
Here a simple example to
let scaleLinear = d3.scaleLinear()
.domain([0,5])
.range([0,400]);
var axisL = d3.axisLeft().scale(scaleLinear).tickPadding(15);
var axisT = d3.axisTop().scale(scaleLinear).tickFormat(function (a,b,c) {
return a + 'element'
});
var axisB = d3.axisBottom().scale(scaleLinear).tickValues([0,2,3]);
var axisR = d3.axisRight().scale(scaleLinear).tickSizeOuter(5);
let body = d3.select('body')
.append('svg')
.attr('width',800)
.attr('height',500);
body.append('g')
.attr('transform','translate(50,50)')
.call(axisL);
body.append('g')
.attr('transform','translate(450,50)')
.call(axisR);
body.append('g')
.attr('transform','translate(50,50)')
.call(axisT);
body.append('g')
.attr('transform','translate(50,450)')
.call(axisB)
After using mobile tranform stars are at the origin of the scale, the specific location to be calculated when generating the specific position
Intelligent Recommendation
D3: scale
Date: 2020-10-09 Author: 18th WRZ Tags: data visualization I. Introduction to the scale Simply understood that the scale is a function that maps the value domain of the input data into an output range...
d3 a nice d3 scale
// Accumulate in CSDN for future reference. A ...
d3-axis coordinate axis
d3-axis d3-axis is an important component in the d3 library. It helps people understand better data by visualizing the scale. Install d3-axis If you have npm, you can directly passnpm install d3-axisW...
D3.js: Scale Scale
When the elements in the dataset are numbers, since the numbers can be large or small, we can't use pixels to represent their size. In this case, we need to use the scale, which is equivalent to the r...
D3 color scale d3.schemeCategory10
Here is a record of the color corresponding to the color scale in D3 (v4/v5): Here you need to pay attention to the version issue, v3 version: ...
More Recommendation
V3 version of D3.js-used in Vue framework (Chapter 3) --- Scale bar and coordinate axis
1. Scale Four commonly used scales are recorded here: linear, ordinal, ordinal segment, time scale, others will be updated later or viewed on their official website d3.scaleLinear() d3.scaleOrdinal() ...
[D3 basic tutorial] Scale-Scale
1 Introduction As data visualization developers, we are always doing a very critical thing repeatedly: mapping values from the data field to the graphics field. For example: mapping the last purchas...
Use of the D3 axis
Method for dynamically changing coordinate axes based on different data First prepare the position of the coordinate axis, call again when calling the coordinate axis, you can dynamically update the c...
D3.js : axis
Reference link:https://github.com/d3/d3/blob/master/API.md#axes-d3-axis First, d3 can generate 4 kinds of axes, which are up, down, left, and right axis generators api, axisTop, axisButtom, axisLeft, ...