d3.js如何在水平日志缩放轴上放置自定义标签

Question

我正在绘制一个带有d3.js的图表, d3.scale.log 用于x轴和自定义标签.不幸的是,标签相互碰撞......有关如何使这项工作的任何提示？

var width = 400;
var x = d3.scale.log().domain([1, 1000]).range([0, width]);

var formatSi = d3.format(".4s");
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function(d, i) {
        return formatSi(d) + 'Hz'
    });

var svg = d3.select("#chart")
    .append("svg").attr("width", width)
    .attr("height", 200)
    .append("g").attr("transform", "translate(20,20)");

([1, 3, 6, 9]).forEach(function(d) {
    x.domain([1, Math.pow(10, d)]);
    svg.append("g").attr("class", "axis x")
        .attr("transform", "translate(0," + d * 2 + "0)")
        .call(xAxis);
});?

这段代码的一个工作示例是在jsfiddle上

Answer 1

弄清楚了.诀窍是不使用.tickFormat提供的格式化功能,而是.ticks 方法,它反过来将应用所提供的格式化功能于.tickFormat 规模的方法.

var width = 400;
var x = d3.scale.log().domain([1, 1000]).range([0, width]);

var formatSi = d3.format(".4s");
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
?    .ticks(5,function(d, i) {
        return formatSi(d) + 'Hz';
    });

var svg = d3.select("#chart")
    .append("svg").attr("width", width)
    .attr("height", 200)
    .append("g").attr("transform", "translate(20,20)");

([1, 3, 6, 9]).forEach(function(d) {
    x.domain([1, Math.pow(10, d)]);
    svg.append("g").attr("class", "axis x")
        .attr("transform", "translate(0," + d * 2 + "0)")
        .call(xAxis);
});

结果仍然不完全令人满意,因为当滴答声靠近时系统似乎无法放置标签......