d3で棒グラフを作る方法は？

-2

質問は非常にシンプルですが、私はそれをどうやってどうやってデータをフォーマットするかわからないのです。d3で棒グラフを作る方法は？

私はちょうどこの例のような単純な棒グラフを作りたい：http://bl.ocks.org/mbostock/3885304

しかし、その代わりにX軸上のA、B、C、などを有していると、それが日（16/01/2017、17 /でしょう01/2017、など）とZ軸で私は時間が必要です。最大は24時間です。私は実際にjsonが毎日の値を秒でフォーマットしたデータを持っています。

[ 
    { 
    "date": "2017-01-08", 
    "uptime": 40320, 
    }, 
    { 
    "date": "2017-01-09", 
    "uptime": 74460, 
    }, 
    { 
    "date": "2017-01-10", 
    "uptime": 73500, 
    }, 
    { 
    "date": "2017-01-11", 
    "uptime": 83640, 
    }, 
    { 
    "date": "2017-01-12", 
    "uptime": 68520, 
    } 
]

何かヒント？

出典

2017-01-17 Arnaud Janssens

あなたのデータは正しくフォーマットされています。リンクされた例の変数名を入れ替えてください。 dateはletter、uptimeはfrequencyである。感謝 - あなたを、

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 
    .bar { 
 
    fill: steelblue; 
 
    } 
 
    
 
    .bar:hover { 
 
    fill: brown; 
 
    } 
 
    
 
    .axis--x path { 
 
    display: none; 
 
    } 
 
</style> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<script> 
 
    var svg = d3.select("svg"), 
 
    margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 40 
 
    }, 
 
    width = +svg.attr("width") - margin.left - margin.right, 
 
    height = +svg.attr("height") - margin.top - margin.bottom; 
 

 
    var x = d3.scaleBand().rangeRound([0, width]).padding(0.1), 
 
    y = d3.scaleLinear().rangeRound([height, 0]); 
 

 
    var g = svg.append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    var data = [{ 
 
    "date": "2017-01-08", 
 
    "uptime": 40320, 
 
    }, { 
 
    "date": "2017-01-09", 
 
    "uptime": 74460, 
 
    }, { 
 
    "date": "2017-01-10", 
 
    "uptime": 73500, 
 
    }, { 
 
    "date": "2017-01-11", 
 
    "uptime": 83640, 
 
    }, { 
 
    "date": "2017-01-12", 
 
    "uptime": 68520, 
 
    }] 
 

 
    data.forEach(function(d){ 
 
    d.uptime = d.uptime/3600; 
 
    }); 
 

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

 
    g.append("g") 
 
    .attr("class", "axis axis--x") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(d3.axisBottom(x)); 
 

 
    g.append("g") 
 
    .attr("class", "axis axis--y") 
 
    .call(d3.axisLeft(y)) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", "0.71em") 
 
    .attr("text-anchor", "end") 
 
    .text("Frequency"); 
 

 
    g.selectAll(".bar") 
 
    .data(data) 
 
    .enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { 
 
     return x(d.date); 
 
    }) 
 
    .attr("y", function(d) { 
 
     return y(d.uptime); 
 
    }) 
 
    .attr("width", x.bandwidth()) 
 
    .attr("height", function(d) { 
 
     return height - y(d.uptime); 
 
    }); 
 
</script>

出典

2017-01-17 23:56:24 Mark

素晴らしい：あなたのデータをJSONに既にあるので、最後に、あなたは<script>タグにインライン化することができます。 Y軸のスケールを秒単位ではなく時間単位で表示する方法はありますか？ –

@ArnaudJanssens、データを前処理し、ちょうど3600で分けて、更新された答えを見てください。 – Mark

多くのありがとうMark、私はY軸に実際のDateオブジェクトを表示しようと間違った方向に行っていました。 –

d3で棒グラフを作る方法は？

答えて

関連する問題