D3の機能が働いていない日付を解析する

Question

私は現在の安定版（3.x）でうまく動作するd3ビジュアライゼーションを持っていますが、Pan & Zoom関数を実装して4.alphaにアップグレードしました。

これは、構文が変更されたため、多くのバグを投げかけました。私は、しかし、次のコードの2行目に属する1つの残りのバグがあり、変数名を更新：ブラウザを介して

function type(d) { 
    d.date = formatDate.parse(d.date); 
    d.Flux = +d.Flux; 
    return d; 
} 

オープニングアップページのソース、私は可視化が現在レンダリングされていないformatDate.parse is not a function.ことがわかります。

私はD3をコーミングしてみました4.alphadocumentation、無駄に。

var formatDate = d3.timeFormat("%d-%b-%y"); 

私はその約70行が長く、元のコードを投稿して幸せ

、およびビットハックカントー：

---

をさらにコード内の最大次のように

、formatDateが定義されています

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 1400// - margin.left - margin.right, 
    height = 1400// - margin.top - margin.bottom; 
var formatDate = d3.timeFormat("%d-%b-%y"); 
var x = d3.scaleLinear() 
    .range([0, width]); 
var y = d3.scaleLinear() 
    .range([height, 0]); 
var line = d3.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.Flux); }); 
var svg = d3.selectAll("#ExoPlanet, #ExoPlanet2").append("svg") 
    .attr("width", '90%') 
    .attr("height", '70%') 
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) 
    .attr('preserveAspectRatio','xMinYMin') 
    .append("g") 
    .call(d3.zoom() 
     .scaleExtent([1/2, 4]) 
     .on("zoom", zoomed)) ; 
function zoomed() { 
    var transform = d3.event.transform; 
    circle.attr("transform", function(d) { 
    return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")"; 
    }); 
} 

d3.tsv("/FluxTime.tsv", type, function(error, data) { 
    if (error) throw error; 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.Flux; })); 
    svg.selectAll("dot") 
     .data(data) 
     .enter().append("circle") 
     .attr("r", 2.0) 
     .attr("cx", function(d) { return x(d.date); }) 
     .attr("cy", function(d) { return y(d.Flux); }) 
     .attr("stroke", "#CE9A76"); 
}); 
function type(d) { 
    d.date = formatDate.parse(d.date)); 
    d.Flux = +d.Flux; 
    return d; 

}

データセットの最初の8つのエントリのスクリーンショット：

Answer 1

D3 3.5では、解析するために、この時刻の形式を使用して...その後

var formatDate = d3.time.format("%d-%b-%y"); 

...とを、あなたがやった方法、時刻の形式を設定を解析できます。

d.date = formatDate.parse(d.date); 

しかし、D3 4.0を使用して、あなたはtimeParseを使用して、別の方法で日付を解析する必要があります。

var parseTime = d3.timeParse("%d-%b-%y"); 

そして、それから、あなたのアクセサ関数を修正する：

function type(d) { 
    d.date = parseTime(d.date); 
    d.Flux = +d.Flux; 
    return d; 
}