D3 数轴

最新推荐文章于 2022-11-03 21:46:11 发布

Claroja

最新推荐文章于 2022-11-03 21:46:11 发布

阅读量777

点赞数 1

分类专栏： D3 文章标签：可视化

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

版权

D3 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

在 SVG 画布的预定义元素里，有七种基本图形：矩形,圆形,椭圆,线段,折线,多边形,路径.
SVG还有g标签,意思是分组,group,可以将其他的容器进行组合.

调用数轴函数并不会返回值，而是会生成数轴相关的可见元素，包括轴线、标签和刻度。

var xAxis = d3.svg.axis();
xAxis.scale(xScale); // 传入比例尺
xAxis.orient("bottom"); //设置标签的位置,是在线上还是线下

svg.append("g")  //分组元素是不可见的
 .call(xAxis);  //call() 接着把 g 交给了 xAxis 函数，也就是要在 g 元素里面生成数轴。

x轴坐标系

<html>
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
    <body>
        <p>hello world</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var width = 300;    //画布的宽度
        var height = 300;   //画布的高度

        var svg = d3.select("body")             //选择文档中的body元素
                    .append("svg")              //添加一个svg元素
                    .attr("width", width)       //设定宽度
                    .attr("height", height);    //设定高度

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

        var linear = d3.scale.linear()
                .domain([0, d3.max(dataset)])
                .range([0, 250]);

        var axis = d3.svg.axis()
                    .scale(linear)      //指定比例尺
                    .orient("bottom")   //指定刻度的方向
                    .ticks(6);          //指定刻度的数量

        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(20,130)")  //transform是将整体平移
            .call(axis);

        </script>
    </body>
</html>

xy居中坐标系
居中的关键是linear方法的映射和transform属性的配合使用

<html>
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
    <body>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var width = 400;    //画布的宽度
        var height = 300;   //画布的高度
        var svg = d3.select("body")             //选择文档中的body元素
                    .append("svg")              //添加一个svg元素
                    .attr("width", width)       //设定宽度
                    .attr("height", height);    //设定高度
        var xlinear = d3.scale.linear()
                .domain([-150, 150])
                .range([0, 300]);
        var ylinear = d3.scale.linear()
                .domain([0, 250])
                .range([250, 0]);
        var xaxis = d3.svg.axis()
                    .scale(xlinear)      //指定比例尺
                    .orient("bottom")   //指定刻度的方向
                    .ticks(10);          //指定刻度的数量
        var yaxis = d3.svg.axis()
                    .scale(ylinear)
                    .orient("left")
                    .ticks(5);
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(0,250)")  //x轴上下平移不会对坐标系造成影响
            .call(xaxis);
        svg.append("g")
            .attr("class","axis")
            .attr("transform","translate(150,0)")  //y轴左右平移不会对坐标系造成影响
            .call(yaxis);
        </script>
    </body>
</html>

设置标签样式

var formatAsPercentage = d3.format(".1%");
xAxis.tickFormat(formatAsPercentage);

Claroja

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
D3 数轴

在 SVG 画布的预定义元素里，有七种基本图形：矩形,圆形,椭圆,线段,折线,多边形,路径. SVG还有g标签,意思是分组,group,可以将其他的容器进行组合.调用数轴函数并不会返回值，而是会生成数轴相关的可见元素，包括轴线、标签和刻度。var xAxis = d3.svg.axis();xAxis.scale(xScale); // 传入比例尺xAxis.orient("bo...
复制链接

扫一扫