D3 Axes

最新推荐文章于 2024-06-07 09:43:30 发布

Claroja

最新推荐文章于 2024-06-07 09:43:30 发布

阅读量96

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/claroja/article/details/106544338

版权

js 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

https://github.com/d3/d3/blob/master/API.md#axes-d3-axis

<head>
    <style>
        .axis path,line{
            fill:none;
            stroke:black;
            shape-rendering:crispEdges;
        }
        .axis text{
            font-family: sans-serif;
            font-size:11px;
        }
    </style>
</head>
<body>
    <script>
        var width = 600
        var height = 600
		//添加画布
        var svg = d3.select("body")
                    .append('svg')
                    .attr('width',width)
                    .attr('height',height)
        var xScale = d3.scale.linear()
                        .domain([0,1])
                        .range([0,300])
        var axis = d3.svg.axis()
                    .scale(xScale)
                    .orient('bottom')
        //使用g元素绘制刻度
        var gAxis = svg.append('g')
        .call(axis)//等同于axis(gAxis)
        .attr('transform','translate(80,80)')
        .attr('class','axis')

    </script>
</body>

d3.axisTop - create a new top-oriented axis generator.
d3.axisRight - create a new right-oriented axis generator.
d3.axisBottom - create a new bottom-oriented axis generator.
d3.axisLeft - create a new left-oriented axis generator.
axis - generate an axis for the given selection.
axis.scale - set the scale.
axis.ticks - customize how ticks are generated and formatted.
axis.tickArguments - customize how ticks are generated and formatted.
axis.tickValues - set the tick values explicitly.
axis.tickFormat - set the tick format explicitly.
axis.tickSize - set the size of the ticks.
axis.tickSizeInner - set the size of inner ticks.
axis.tickSizeOuter - set the size of outer (extent) ticks.
axis.tickPadding - set the padding between ticks and labels.

Claroja

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3 Axes

https://github.com/d3/d3/blob/master/API.md#axes-d3-axis<head> <style> .axis path,line{ fill:none; stroke:black; shape-rendering:crispEdges; } .axis text{ font-family:
复制链接

扫一扫