[D3] Create Chart Axes with D3 v4
with create v4 Chart D3
2023-09-14 09:00:51 时间
Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons.
var margin = { top: 10, right: 20, bottom: 60, left: 25 }; var width = 425 - margin.left - margin.right; var height = 625 - margin.top - margin.bottom; var svg = d3.select('.chart') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); svg.append('rect') .attr('width', width) .attr('height', height) .style('fill', 'lightblue') .style('stroke', 'green'); /** * Create Y axis */ // Set scale const yScale = d3.scaleLinear() .domain([0, 100]) .range([height, 0]); // add y-axis const yAxis = d3.axisLeft(yScale); // const yAxis = d3.axisLeft(yScale).ticks(10, '.1s'); // If you want to add fine control about the ticks: // const yAxis = d3.axisLeft(yScale).tickValues([5,10,30,50,80,100]); // add to the svg svg.call(yAxis); /** * Create X axis */ const xScale = d3.scaleTime() .domain([new Date(2017, 6, 1), new Date(2017, 7, 1)]) .range([0, width]); //https://github.com/d3/d3-time const xAxis = d3.axisBottom(xScale) .ticks(d3.timeDay.every(4)) .tickSize(10) .tickPadding(15); svg.append('g') .attr('transform', `translate(0, ${height})`) .call(xAxis);
相关文章
- Create view failed with ORA-01031:insufficient privileges
- ASTER:An Attentional Scene Text Recognizer with Flexible Rectification
- How to Create Mixed Reality Videos for the Vive - with Two Controllers
- [Typescript] Creating Chainable Method Abstractions with Generics and the Builder Pattern - 05
- [CSS] Create Basic Effects with CSS box-shadow
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Javascript] Create a `range` Helper Function with a Generator
- [React] Create a Query Parameter Modal Route with React Router
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
- [Javascript Crocks] Create a Maybe with a `safe` Utility Function
- [PReact] Create a Hello World App with Preact
- [Javascript] Create scrollable DOM elements with Greensock
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
- [React Testing] Assert That Something is NOT Rendered with React Testing Library (with rerender & query)
- [Tools] Create Files in the Terminal from the Clipboard with PBPaste
- [Javascript] Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops
- [CLI] Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces
- [AST ESlint] Apply fix with ESlint plugin
- [React] Create a Query Parameter Modal Route with React Router
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- [Angular] Protect The Session Id with https and http only
- [D3] Create DOM Elements with D3 v4
- [React Router v4] Create Basic Routes with the React Router v4 BrowserRouter
- [JS Compose] 5. Create types with Semigroups
- [D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4
- what happened after a template is selected in Create with template button
- PHP Curl transfer closed with outstanding read data remaining
- Java如何获取IP属地 ip2region failed to create searcher with x:java.io.FileNotFoundException:( 系统找不到指定的路径)
- compute the su procedure time with python
- 3GPP TS 29244-g30 中英文对照 | 5.8.2Behaviour with an Established PFCP Association