[D3] Create Chart Axes with D3 v4
with create v4 Chart D3
2023-09-14 08:59:18 时间
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);
相关文章
- 生成式 AI 讲故事,儿童也能创作自己的睡前故事? #Create With Alexa
- ORA-02022: remote statement has unoptimized view with remote object ORACLE 报错 故障修复 远程处理
- ORA-22978: only simple attribute name is allowed in the WITH OBJECT OID clause ORACLE 报错 故障修复 远程处理
- ORA-32045: maximum level of recursion reached while executing recursive WITH query ORACLE 报错 故障修复 远程处理
- ORA-48166: error with opening ADR block file because file does not exist [string] [string] ORACLE 报错 故障修复 远程处理
- MySQL Error number: 3978; Symbol: ER_FOREIGN_KEY_WITH_ATOMIC_CREATE_SELECT; SQLSTATE: HY000 报错 故障修复 远程处理
- ORA-02001: user SYS is not permitted to create indexes with freelist groups ORACLE 报错 故障修复 远程处理
- ORA-02345: cannot create a view with column based on CURSOR operator ORACLE 报错 故障修复 远程处理
- ORA-10848: OCI Non Blocking not supported with string ORACLE 报错 故障修复 远程处理
- ORA-13660: A directive instance with the name “string” already exists. ORACLE 报错 故障修复 远程处理
- Create a nice looking chart with CL_GUI_CHART_ENGINE – Part 1 – Chart Designer详解编程语言
- Create a nice looking chart with CL_GUI_CHART_ENGINE – Part 3 – Chart Data and render详解编程语言
- Boost Your Database Skills with These MustRead MySQL EBooks(mysql电子书)
- Effective Data Analysis Made Easy with MySQL Grouping and Reporting(mysql分组查询统计)
- MySQL查询优化使用WITH子句的限制与替代方案(mysql不能用with)