d3.jsを使用してミリ秒を含む時間形式でグラフのx軸をスケールする方法は？

Question

csvデータを使用してd3.jsを使用してヒートマップを生成したいとします。ヒートマッププロットの場合、私はx軸、y軸、z軸を設定しようとしています。しかし、私はグラフのx軸を設定しながら問題に直面しています。

サンプルCSVデータ：

var csv_data = "date,bucket,count\n07:31:01 001,10000,12\n07:31:01 119,50000,13\n07:31:01 128,60000,53\n07:31:01 200,90000,24\n07:31:01 555,75000,56"; 

プログラム

<script> 
var margin = {top: 20, right: 90, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 


var parseDate = d3.time.format("%Y-%m-%d").parse, 
    formatDate = d3.time.format("%b %d"); 

// 
var x = d3.time.scale().range([0, width]), 
    y = d3.scale.linear().range([height, 0]), 
    z = d3.scale.linear().range(["white", "steelblue"]); 

// The size of the buckets in the CSV data file. 
// This could be inferred from the data if it weren't sparse. 
var xStep = 864e5, 
    yStep = 100; 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var csv_data = "date,bucket,count\n07:31:01 001,10000,12 005\n07:31:01 119,50000,13\n07:31:01 128,60000,53"; 

    var buckets = d3.csv.parse(csv_data); 
    buckets.forEach(function(d) { 
     d.date = d.date; 
     d.bucket = +d.bucket; 
     d.count = +d.count; 
    }); 

    x.domain(d3.extent(buckets, function(d) { return d.date; })); 
    y.domain(d3.extent(buckets, function(d) { return d.bucket; })); 
    z.domain([0, d3.max(buckets, function(d) { return d.count; })]); 

    // Extend the x- and y-domain to fit the last bucket. 
    // For example, the y-bucket 3200 corresponds to values [3200, 3300]. 
    x.domain([x.domain()[0], +x.domain()[1] + xStep]); 
    y.domain([y.domain()[0], y.domain()[1] + yStep]); 

    // Display the tiles for each non-zero bucket. 
    svg.selectAll(".tile") 
     .data(buckets) 
     .enter().append("rect") 
     .attr("class", "tile") 
     .attr("x", function(d) { return x(d.date); }) 
     .attr("y", function(d) { return y(d.bucket + yStep); }) 
     .attr("width", x(xStep) - x(0)) 
     .attr("height", y(0) - y(yStep)) 
     .style("fill", function(d) { return z(d.count); }); 

    // Add a legend for the color values. 
    var legend = svg.selectAll(".legend") 
     .data(z.ticks(6).slice(1).reverse()) 
    .enter().append("g") 
     .attr("class", "legend") 
     .attr("transform", function(d, i) { return "translate(" + (width + 20) + "," + (20 + i * 20) + ")"; }); 

    legend.append("rect") 
     .attr("width", 20) 
     .attr("height", 20) 
     .style("fill", z); 

    legend.append("text") 
     .attr("x", 26) 
     .attr("y", 10) 
     .attr("dy", ".35em") 
     .text(String); 

    svg.append("text") 
     .attr("class", "label") 
     .attr("x", width + 20) 
     .attr("y", 10) 
     .attr("dy", ".35em") 
     .text("Count"); 

    // Add an x-axis with label. 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.svg.axis().scale(x).orient("bottom")) 
    .append("text") 
     .attr("class", "label") 
     .attr("x", width) 
     .attr("y", -6) 
     .attr("text-anchor", "end") 
     .text("Time"); 

    // Add a y-axis with label. 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(d3.svg.axis().scale(y).orient("left")) 
    .append("text") 
     .attr("class", "label") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .attr("text-anchor", "end") 
     .attr("transform", "rotate(-90)") 
     .text("Latency"); 

    </script> 

コード - 現在、グラフは次のように表示されます。

どのように文字列にデータを持つグラフのx軸を設定できますか？ここで私は何が欠けているのですか？

Answer 1

x axisは時間スケールを表す。文字列の代わりに有効な日付オブジェクトを渡す必要があります。あなたの特定の例では、これはなる：

buckets.forEach(function(d) { 
    d.date = timeFormat.parse(d.date); 
    d.bucket = +d.bucket; 
    d.count = +d.count; 
}); 

TIMEFORMATはd3.time.formatフォーマッタです：

var timeFormat = d3.time.format('%H:%M:%S %L'); 

あなたがthe following directiveを使用することができます（ミリ秒）を解析するには：

%のL - ミリ秒10進数[000、999]。

お客様のCSVデータでは、日付は指定された形式に従う必要があります。 EXのために：ここで

07:31:01 001,10000,12005 
13:34:01 119,50000,13 
17:39:01 128,60000,53 

は作業jsfiddle次のとおりです。