Biểu đồ đường D3 với nhiều dòng tùy ý (và định dạng dữ liệu cụ thể)

Question

Tôi đang gặp một số rắc rối với D3 và tôi đang kết thúc trí thông minh của mình. Về cơ bản tôi có một đồ thị chuỗi thời gian với nhiều dòng tùy ý và dữ liệu nguồn không thể sửa đổi để thuận tiện trước khi bàn tay (nhưng nó có thể được xử lý phía máy khách).

Dữ liệu được định dạng thusly (với tùy tiện nhiều nhãn):

object = [ 
{ 
    "_id": "2012-08-01T05:00:00", 
    "value": { 
    "label1": 1.1208746110529344, 
    "label2": 0.00977592175310571 
    } 
}, 
{ 
    "_id": "2012-08-15T05:00:00", 
    "value": { 
    "label1": 0.7218920737863477, 
    "label2": 0.6250727456677252 
    }, 
    .... 

Tôi đã thử một cái gì đó như:

var vis = d3.select.(element) 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("svg:g"); 

var line = d3.svg.line() 
    .x(function(data) {return x(new Date(data._id));}) 
    .y(function(data) {return y(data.value);}); 


vis.append("svg:path") 
    .attr("d", line(object)) 
    .attr("stroke", "black"); 

Mà dường như không thể truy cập các giá trị chính xác thông qua y accessor như Tôi nhận được lỗi ": phân tích vấn đề" và rất nhiều "NaNL3.384615384615385, NaNL6.76923076923077, NaNL10.153846153846155". Tuy nhiên, nếu tôi mã hóa giá trị nhãn thông qua một cái gì đó như:

.y(function(data) {return y(data.value.label1);}); 

Nó hoạt động tốt, nhưng chỉ cho một dòng. Bất cứ ai có thể giúp đỡ?

Answer 1

Tôi muốn bắt đầu bằng cách chuyển đổi các dữ liệu vào mảng song song của cùng một định dạng: (. Bạn có thể sử dụng để tính toán d3.keys tên hàng loạt tự động, chứ không phải là cứng mã hóa chúng như trên)

var series = ["label1", "label2"].map(function(name) { 
    return data.map(function(d) { 
    return {date: new Date(d._id), value: d.value[name]}; 
    }); 
}); 

Bây giờ series là một mảng các mảng. Một loạt duy nhất, chẳng hạn như label1, sẽ giống như thế này:

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344}, 
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477}, 
… 

Vì họ có định dạng tương tự, bạn có thể sử dụng các máy phát điện cùng một dòng cho tất cả các series:

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

Và tương tự như vậy các lồng nhau mảng cho chính nó tốt để tham gia dữ liệu để tạo các phần tử đường dẫn cần thiết:

svg.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

Answer 2

Hãy thử kết hợp parseFloat để đảm bảo chắc chắn rằng bạn đang chuyển đổi thành phao và không được ngầm ẩn. Nếu điều đó vẫn không hoạt động, hãy thử lấy các chuỗi của dây của bạn (cắt một số độ chính xác) cho đến khi nó hoạt động.