html实现坐标轴,06坐标轴.html

06坐标轴

.axis path,

.axis line {

fill: none;

stroke: red;

shape-rendering: crispEdges;

}

.axis text {

font-family: sans-serif;

font-size: 11px;

}

const dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

const linear = d3.scaleLinear()

.domain([0, d3.max(dataset)])

.range([0, 250])

const axis = d3.axisBottom(linear)

// .scale(linear) // 设置坐标轴的比例尺

.ticks(dataset.length) // 指定刻度的数量

const body = d3.select('body')

body.append('svg')

const svg = body.select('svg')

svg.append('g')

.attr('class', 'axis')

.attr("transform", "translate(20,130)")

.call(axis)

svg.append('rect')

.attr('transform', 'translate(20,100)')

.attr('height', 20)

.attr('width', linear(2.5))

一键复制

编辑

Web IDE

原始数据

按行查看

历史