タイムスタンプの配列からD3棒グラフを作成

Question

私はベストプラクティスについてのいくつかの洞察力/ここから始める方法を探しています。私は与えられた日から1000のタイムスタンプを持つjsonオブジェクトを持っています。私はx軸を4時間のティックで24時間の時間枠として構築したいと思います...午前12時 - 午前4時、午前4時 - 午前8時など、私はボリュームに基づいてy軸を構築したいと考えています。そのため、4時間の各バーには、その期間のタイムスタンプの数に基づいてポピュレートされます。私のJSONは、この（より多くのエントリを除いて）次のようになります。

[ 
{"Time":"2017-02-07 16:14:06"}, 
{"Time":"2017-02-07 16:58:49"}, 
{"Time":"2017-02-07 17:07:11"}, 
{"Time":"2017-02-07 18:13:19"}, 
{"Time":"2017-02-07 13:56:06"}, 
{"Time":"2017-02-07 19:07:57"}, 
{"Time":"2017-02-07 12:08:58"}, 
{"Time":"2017-02-07 01:41:00"}, 
{"Time":"2017-02-07 11:56:49"}, 
{"Time":"2017-02-07 02:45:29"} 
] 

私は特に「時間」の方法で構築を使用する方法について、D3に読みをたくさんやっているが、私はいくつかを得るために期待しています始める方法の指針。私が望む最終結果は、ここに添付された画像のように見えます（黒いバーは無視されます）。任意のヘルプ/ポインタは非常に感謝しています。

Answer 1

これは純粋なD3ソリューションではありませんが、私はJSONオブジェクトを解析して、各時間間隔の合計カウントを持つ新しいものを作成し、それをd3グラフに送ります。

あなたはまだ試したことがわかりませんが、これは正しい経路であなたを得るはずです。

https://jsfiddle.net/9f2vp8gp/

var margin = { 
    top: 20, 
    right: 20, 
    bottom: 70, 
    left: 40 
    }, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%m").parse; 

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 

var y = d3.scale.linear().range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%m")); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")"); 

var data = [{ 
    "date": "1", 
    "value": 44 
}, { 
    "date": "2", 
    "value": 24 
} ,{ 
    "date": "3", 
    "value": 31 
},{ 
    "date": "4", 
    "value": 38 
},{ 
    "date": "5", 
    "value": 46 
},{ 
    "date": "6", 
    "value": 23 
}]; 

data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.value = +d.value; 
}); 

x.domain(data.map(function(d) { 
    return d.date; 
})); 
y.domain([0, d3.max(data, function(d) { 
    return d.value; 
})]); 

svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis) 
    .selectAll("text") 
    .style("text-anchor", "end") 
    .attr("dx", "-.8em") 
    .attr("dy", "-.55em") 
    .attr("transform", "rotate(-90)"); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Value ($)"); 

svg.selectAll("bar") 
    .data(data) 
    .enter().append("rect") 
    .style("fill", "steelblue") 
    .attr("x", function(d) { 
    return x(d.date); 
    }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { 
    return y(d.value); 
    }) 
    .attr("height", function(d) { 
    return height - y(d.value); 
    });