D3，如何完成這個圖表，數據格式

Question

這是我與d3.js製作圖表，這是一個版本的截圖那種工作

http://i49.tinypic.com/sy30c8.png

我改變了一些東西爲時間維度。看到這裏

http://jsfiddle.net/GyWpN/14/

我比較開放門票封閉門票系列天。

目前我覺得我的數據格式不正確。

[ 
{ 
    "open": "1", 
    "date": "2012-12-02 00:00:00+00", 
    "completed": 0 
}, 
{ 
    "open": "3", 
    "date": "2012-12-11 00:00:00+00", 
    "completed": 0 
}, 
{ 
    "open": "1", 
    "date": "2012-12-12 00:00:00+00", 
    "completed": 0 
}, 
{ 
    "open": "1", 
    "date": "2012-12-17 00:00:00+00", 
    "completed": 0 
}, 



. 
. 
. 
] 

也許它應該有不同的格式，因爲我需要做兩組比較。

數據應該是兩個json數組嗎？

我該如何完成此圖？目前在將x維度從d3.scale.linear()更改爲d3.time.scale()後，我無法獲取任何要查看的數據。我也將對象更改爲您所看到的當前json格式。

洞察讚賞

Answer 1

您可以使用此數據格式設置爲你想要的東西，這不是做事情的一個非常乾燥的方式，但它可以幫助你下一個步驟：

var data = [ 
    { 
     "open": "3", 
     "date": "2012-12-02 00:00:00+00", 
     "completed": 0 
    }, 
    { 
     "open": "4", 
     "date": "2012-12-11 00:00:00+00", 
     "completed": 1 
    }, 
    { 
     "open": "2", 
     "date": "2012-12-12 00:00:00+00", 
     "completed": 4 
    }, 
    { 
     "open": "5", 
     "date": "2012-12-17 00:00:00+00", 
     "completed": 9 
    }]; 

var width = 276, 
    height = 200, 
    padding = 50; 

// input format of date 
var parse_date = d3.time.format("%Y-%m-%d 00:00:00+00").parse; 

// clean data 
data.forEach(function(d) { 
    d.date = parse_date(d.date); 
    d.open = parseInt(d.open); 
    //d.completed = parseInt(d.completed); 
}); 

// time scale for x axis 
var x = d3.time.scale() 
    .domain(d3.extent(data, function(d) { return d.date; })) 
    .range([0, width-padding]); 

// assume you start from 0 and that completed has max value 
// probably needs improving 
var y = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d.completed; })]) 
    .range([height-padding, 0]); 

// verbose but simple way of defining lines and areas 

var open_line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.open); }); 

var complete_line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.completed); }); 

var open_area = d3.svg.area() 
    .x(open_line.x()) 
    .y1(open_line.y()) 
    .y0(y(0)); 

var complete_area = d3.svg.area() 
    .x(complete_line.x()) 
    .y1(complete_line.y()) 
    .y0(y(0)); 

// draw the svg 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 


// define xaxis 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%d-%b")); 

// attach data to a g object 
var lines = svg.append("g") 
    .data([data]); // a list with a single item as the whole path is generated from a single list 

// draw lines and areas 

lines.append("path") 
    .attr("class", "line") 
    .attr("d", open_line); 

lines.append("path") 
    .attr("class", "area") 
    .attr("d", open_area); 

lines.append("path") 
    .attr("class", "line") 
    .attr("d", complete_line); 

lines.append("path") 
    .attr("class", "area") 
    .attr("d", complete_area); 

// now use data without the additional nest as want to create an dot for each 
// item in the list 
dots = lines.selectAll(".dot") 
    .data(data); 

    // draw two lots of dots, one for opened and one for completed 
    dots.enter() 
    .append("circle") 
    .attr("class", "dot") 
    .attr("cx", open_line.x()) 
    .attr("cy", open_line.y()) 
    .attr("r",3.5); 

    dots.enter() 
    .append("circle") 
    .attr("class", "dot") 
    .attr("cx", complete_line.x()) 
    .attr("cy", complete_line.y()) 
    .attr("r",3.5); 

// and put the xaxis in 
svg.append("g") 
    .attr("class", "axis") // give it a class so it can be used to select only xaxis labels below 
    .attr("transform", "translate(0," + (height - padding) + ")") 
    .call(xAxis)​ 

http://jsfiddle.net/phoebebright/JZJr8/4/