2

d3.scale.log カスタム ラベルと組み合わせて x 軸に使用する d3.js でグラフを描画して います。残念ながら、ラベルが互いに衝突しています...これを機能させる方法に関するヒントはありますか?

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にあります

4

1 に答える 1

6

理解した。トリックは、書式設定関数を提供するために使用するのではなく 、提供された書式設定関数を スケールのメソッドに適用するメソッドを使用することです。.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);
});

ティックが互いに接近しているときにシステムがラベルを配置するのに問題があるように見えるため、結果はまだ完全に満足できるものではありません...

于 2012-05-24T07:26:24.847 に答える