d3.jsを使用してロールアップで作成した配列内の特定のデータを呼び出す

Question

現在、出荷データの視覚化に取り組んでいますが、xAxisが00:00〜23:59の折れ線グラフを作成しようとしています。 yAxisはその日の特定の分の船の量です。私は1440オブジェクトを含む配列を作成することができました（毎分1つ）。その配列内の各オブジェクトには、次のようになります。

Object with data at 00:00 hours

Object with data at 00:01 hours

これは私が言った配列を作成するために使用するコードスニペットです。その後、私のコードで

var \t shipTotal = d3.nest() 
 
    .key(function(d) { 
 
    return d.Timestamp; 
 
    }) 
 
    .sortKeys(d3.ascending) 
 
    .rollup(function(d){ 
 
    return d3.sum(d, function(g) { 
 
    return +g.Enen; 
 
    }); 
 
}) 
 

 
.entries(data);

私はXが私のメインのデータセット内のタイムスタンプであり、Yは量である私が作成した配列に値あるライン変数を作成しようその特定の分に出荷されます。

var \t lijn1 = d3.line() 
 
    .x(function(d){ 
 
    return xScale(shipTotal[d.key]); 
 
    }) 
 
    .y(function(d, value){ 
 
    return yScale(shipTotal[d.value]); 
 
    });

私はXが同様に最も可能性が間違っているが、コードの行は、何のXやY座標を持っていないことを理解しています。 Webブラウザでラインを慰めるD = "MNaN、NaNLNaN、NaNLNaN ...回1440

最後に、私はパスを追加し、コードスニペットを示しています。

chartGroup.append("path") 
 
.data([shipTotal]) 
 
.attr("class", "lijntje1") 
 
.attr("d", lijn1(shipTotal \t)) 
 
.attr("stroke", "red") 
 
.attr("fill", "none");

Answer 1

警告：これが唯一の問題であるかどうかを判断するには、スニペットから欠けているものがたくさんありますが、それでも--->

shipTotalは、オブジェクト自体ではなく{key：a_key、value：data_for_that_key}の形式のオブジェクトの配列になります。したがって、 "00:01"のようなキーでshipTotalにアクセスすることはできません。幸い.sortKeys(d3.ascending)はデータが既に00:01タイプのキーでソートされていて、最後のスニペット（.attr("d", lijn1(shipTotal))）のline関数にshipTotalを渡しているので、d3.lineスニペットでshipTotalを参照する必要はありませんいずれかの方法。試してみてください：

var lijn1 = d3.line() 
    // d at this point should be an individual {key: ..., value: ...} element of the shiptotal array 
    .x(function(d, i){ 
    // assuming xScale domain is set on [00:00, 00:01, 00:02 etc] type keys, 
    // if it's 0-1439, try xScale(i) instead 
    return xScale(d.key); 
    }) 
    .y(function(d){ 
    return yScale(d.value); 
    });