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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。