d3.js 坐标轴与刻度

时间 2019-11-11
原文原文链接
    <style>
        .axis path,
        .axis 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,10])
                    .range([0,300]);

        // 定义坐标轴
        var axis = d3.svg.axis()
                    .scale(xScale)    //使用上边定义的比例尺
                    .orient("bottom")//刻度方向向下   可设置刻度方向向上，下，左，右 
                    .ticks(5)           
                    //.tickValues([3,4,5,6,7]) //自定义显示的刻度
                    .tickSize(2,6); //调整刻度长度 第一个参数内部刻度长度，第二个参数首尾刻度长度 （也可用innerTickSize()内部和outerTickSize()首尾 来分别进行设置

        // 在svg中添加一个包含坐标轴各元素的g元素
        var gAxis = svg.append("g")
                        .attr("transform","translate(80,80)")   //平移到（80,80）
                        .attr("class","axis")
                        .call(axis);    //将gAxis做为参数传递给axis （另外一种绘制方法）
        // 在gAxis中绘制坐标轴
        // axis(gAxis);

    </script>