12

日曜日だけを表示するのではなく、スケールを初日に開始して最終日に終了させたいのですが、次のようになります。

データを28（3ではなく）から開始したいのですが、日曜日の3から開始します。

曜日を問わず、スケールを開始するにはどうすればよいですか？

表示される日を、日曜日ではなくグラフに表示するデータと一致させたい。

例へのリンク：http：//jsfiddle.net/3LZua/2/

前もって感謝します。

PSここにコードがあります:(htmlにあります）

followerLineGraph = function(data)
{    
    var width = 400;

    var x = d3.time.scale()
        .domain([data[0].date, data[data.length - 1].date])
        .range([0, width]);

    var chart = d3.select("#test").append("svg").attr("class", "chart");

    //Date Label
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(data.length)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(0)
        .tickPadding(8);

    chart.append('g')
        .attr('fill', '#1ff')
        .call(xAxis);
}

    var data = [
      { date: new Date(2013, 1, 28), TotalLikes: 18 },
      { date: new Date(2013, 2, 14), TotalLikes: 15 },
      { date: new Date(2013, 2, 21), TotalLikes: 17 },
      { date: new Date(2013, 2, 28), TotalLikes: 17 },
      { date: new Date(2013, 3, 4), TotalLikes: 20 }
];

followerLineGraph(data);
4

2 に答える 2

43

非常によく似た問題に直面したばかりで、d3のドキュメントで答えを見つけることができませんでした。ただし、d3ソースコード（https://github.com/mbostock/d3/blob/master/d3.js）を確認したところ、次の行が見つかりました。

d3.time.weeks = d3.time.sunday.range;

このヒントを念頭に置いて：ドキュメントで説明されているように、

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.weeks, 1);

毎週日曜日に目盛りの付いた軸を与えます—そしてそう

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.xxxday.range, 1);

、、、、、、、、、または。のすべてxxxdayに目盛りが付いた軸xxxdayを指定します。mondaytuesdaywednesdaythursdayfridaysaturdaysunday

于 2013-07-03T04:55:47.513 に答える
17

ここにはいくつかの選択肢があります。

軸で「ティック」を呼び出すと、引数が基になるスケールに渡され、描画する軸のリストティックが取得されます。単一の数値を渡すと、スケールは「適切な」値を生成しようとします。数値は、理想的には何ティックが好きかについてのヒントです。実際に受け取る数を保証するものではありません。

.ticks(5)

結果：03/03-日03/10-日03/17-日03/24-日03/31-日

タイムスケールを使用しているため、ティック間の時間を指定するオプションもあります。例：

.ticks(d3.time.days,7)

結果：03/01-金03/08-金03/15-金03/22-金03/29-金04/01-月

これにより、7日ごとにダニが発生します。しかし、それでも月の始まりのような「素敵な」時間境界を含めようとするだろうと思います。

微調整された（ただし多少静的な）状況では、軸のtickValuesメソッドを使用して、ティックを配置する場所を実際に正確に指定できます。私はそれを使用して、すべてのデータポイントの日付を正確に設定しました。

xAxis2.tickValues(data.map(function(d) { return d.date;}))

最後に、実際にティック関数に引数を渡して、毎回必要なティックを正確に取得できます。関数は開始と終了を取得するので、ティックをそれらに加えて私が行った中点に設定します。

xAxis3.ticks(function(start, end) {
    console.log(arguments);
    var mid = new Date((start.getTime() + end.getTime()) / 2);

ただし、この場合は、おそらくスケールで関数を設定する必要があります。そうすれば、軸を介して呼び出すことでステップ引数を利用できます（詳細については、d3のドキュメントを参照してください）。

ここでフィドルで遊ぶことができます。

スケールティックと軸ティック値のドキュメントも確認してください。ここには素晴らしい軸のチュートリアルもあります。

于 2013-03-11T22:59:08.060 に答える