d3.js 두 날짜 사이의 일 수

Question

시작 날짜와 종료 날짜 사이의 거리를 그래프로 나타내고 싶습니다. x 위치를 시작 날짜로 사용하고 시작과 끝 사이의 일 수로 사각형의 너비가 필요합니다.

이 방법으로 데이터를 표시하는 것은 바람직하지 않습니다. 종료일에 END까지 너비가 필요하지만 저울이 왜곡하는 것처럼 보입니다. 감사!

var w = 925; 
var h = 400; 
var padding = 50; 

var interactiveViz = d3.select("#viz").append("svg") 
    .attr("width", w) 
    .attr("height", h); 

var minDate = new Date(1999, 1, 27), 
    maxDate = new Date(2013, 10, 9);  

var xscale = d3.time.scale() 
    .domain([minDate, maxDate]) 
    .range([0,w]); 

var xaxis = d3.svg.axis() 
    .scale(xscale) 
    .tickFormat(d3.time.format('%Y')) 
    .tickValues([minDate, maxDate]); 

interactiveViz.selectAll("rect") 
    .data(myData) 
    .enter() 
    .append("rect") 
    .attr("x", function(d) { return xscale(new Date(d.start)) }) 
    .attr("y", function(d,i) { return i*15 }) 
    .attr("height", "14px") 
    .attr("width", function(d) { return xscale(new Date(d.end)) }); 

interactiveViz.append("g") 
    .attr("class", "x-axis") 
    .attr("transform", "translate(0,"+(h-padding)+")") 
    .call(xaxis) 
    .selectAll("text") 
    .attr("y", "10px") 
    .style("fill", "#999999"); 

데이터 :

var myData = [ 
{"country":"name1","start":"1/27/1999","end":"12/8/2000"}, 
{"country":"name2","start":"1/29/1999","end":"12/21/1999"}, 
{"country":"name3","start":"12/5/2012","end":"12/18/2012"} 
] 

Answer 1

당신은 폭이 시작 날짜와 종료 날짜 사이의 픽셀 수와 동일하게합니다.

시작일의 화소 위치는 다음

xscale(new Date(d.start)) 

종료일의 화소 위치는 다음

가

xscale(new Date(d.end)) 

그들 사이의 화소 수가

xscale(new Date(d.end)) - xscale(new Date(d.start)) 

인 폭이

과 같아야합니다.

.attr("width", function(d) { return xscale(new Date(d.end)) - xscale(new Date(d.start)) });