d3.axis是否支持不平等分裂

Question

我想达到以下效果

D3.axis可以实现吗？

Answer 1

如果您有x轴的值：

var scale = d3.scaleLinear()
        .domain([0, 90])
        .range([0, width]);

var axis = d3.axisBottom()
        .scale(scale)
        .tickValues([2, 10, 40, 70, 74, 78, 82, 90])  // <--HERE's your data
        .tickSize(12)

这给了你：

    var height = 500, 
        width = 500, 
        margin = 25,
        axisWidth = width - 2 * margin;
    
    var svg = d3.select("body").append("svg")
            .attr("class", "axis")
            .attr("width", width)
            .attr("height", height);
    
    var scale = d3.scaleLinear()
            .domain([0, 100])
            .range([0, width]);
    
    var axis = d3.axisBottom()
            .scale(scale)
            .tickValues([2, 10, 40, 70,74,78,82,90])
            .tickSize(12)
    svg.append("g")        
        .attr("transform", function(){
            return "translate(" + margin +
                    "," + margin + ")";
        })
        .call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>