记录:d3实现刻度尺

1、设置一个作用域
 

2、使用d3Js画图

// 设置画布的宽高
const width = 300;
const height = 60;

const svg = d3.select("#lineContainer") // 获取作用域
        .append("svg")                  // 插入svg节点
        .attr("width",width)
        .attr("height",height)
        .attr('style','font-size:9px'); // 设置刻度样式
    
// 用于坐标轴的比例尺
const xScaleLine = d3.scaleLinear()
        .domain([0,1])                  // 刻度尺的总区间为0-1
        .range([0,200]);                // 刻度尺所覆盖的data数据区间为0-200

const axisBottomLine = d3.axisBottom()
        .scale(xScaleLine)          // 使用上面定义的比例尺
        .ticks(4)                   // 指定刻度的数量,会根据当前区间做出最优分配
        .tickSize(5)                // 控制刻度的大小
        .tickFormat(d3.format(".0%")); // 设置标签数字的格式

//在s

你可能感兴趣的:(html,javascript,css)