1
私はjavascriptで新しいですので、いくつか必要があります。 d3jsライブラリを使用して、自分のページにグラフを描画しています。
先週、私はresponsive chat visualizationというようなものに遭遇しました。今私は彼らがすべてより良い方法で一緒に働くように方法を見つけようとしています。誰かが私に解決策を見つけるのを助けることを願っています。 私はシンプルHTMLページにjsonファイルのD3js複数折れ線グラフ
<div id="chart"></div><script src="js/chart2.js"></script>
スクリプトがあります。
[{"lux":"0","date":"2017-08-11 15:10:34.363"},
{"lux":"32","date":"2017-08-11 15:19:34.363"},
{"lux":"90","date":"2017-08-11 15:19:40.225"},
{"lux":"176","date":"2017-08-11 15:20:06.360"},
{"lux":"116","date":"2017-08-11 15:28:14.115"},
{"lux":"50","date":"2017-08-11 15:28:19.225"},
{"lux":"32","date":"2017-08-11 15:29:00.100"}]
しかし、私は複数行チャートと私を必要とする：JSONファイルは、次のようになりながら、それは、完璧に働いて
var Chart = (function(window,d3) {
var svg,div, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path,fh,fw, dots, margin = {}, width, height, locator,formatTime;
var timeFormat = d3.time.format('%Y-%m-%d %H:%M:%S.%L');
var wbreakPoint = 768;
var hbreakPoint = 200;
d3.json('data2.json', init);
function init(json) {
data = json;
xExtent = d3.extent(data, function(d,i) { return new Date(d.date) });
yExtent = d3.extent(data, function(d,i) { return parseInt(d["lux"]); });
x = d3.time.scale().domain(xExtent);
y = d3.scale.linear().domain(yExtent).range([0, height]);
xAxis = d3.svg.axis().orient('bottom').tickFormat(d3.time.format('%d %H:%M:%S'));
yAxis = d3.svg.axis();
line = d3.svg.line()
.x(function(d) { return x(new Date(d.date)) })
.y(function(d) { return y(d.lux) })
.interpolate("basis");
svg = d3.select('#chart')
.append('svg')
.style('pointer-events', 'none');
svg.append("rect")
.attr("fill", "rgba(0, 128, 0, 0.2)");
chartWrapper = svg
.append('g')
.style('pointer-events', 'all');
var defs = chartWrapper.append("defs");
var gradient = defs.append("linearGradient")
.attr("id", "svgGradient")
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", "0%")
.attr("y2", "100%");
gradient.append("stop")
.attr('class', 'start')
.attr("offset", "0%")
.attr("stop-color", "red")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr('class', 'end')
.attr("offset", "100%")
.attr("stop-color", "blue")
.attr("stop-opacity", 1);
path = chartWrapper.append('path').data([data]).classed('line', true);
chartWrapper.append('g').classed('x axis', true);
chartWrapper.append('g').classed('y axis', true);
touchScale = d3.scale.linear();
render();}
function render() {
updateDimensions(window.innerWidth);
x.range([0, width]);
y.range([height, 0]);
touchScale.domain([0,width]).range([0,data.length-1]).clamp(true);
svg
.attr('width', '100%')
.attr('height', height + margin.top + margin.bottom);
fh = svg.style("height").replace("px", "");
fw = svg.style("width").replace("px", "");
chartWrapper
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
xAxis.scale(x);
yAxis.scale(y).orient(window.innerWidth < wbreakPoint ? 'right' : 'left');
if(window.innerWidth < wbreakPoint) {
xAxis.ticks(d3.time.minutes, 4)
}
else {
xAxis.ticks(d3.time.minutes, 1)
}
if(window.innerinnerHeight < hbreakPoint) {
yAxis.ticks(Math.max(height/50, 2))
}
else {
yAxis.ticks(Math.max(height/50, 1));
}
svg.select('.x.axis')
.attr('transform', 'translate(0,' + height + ')')
.transition()
.duration(500)
.delay(200)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-50)");
svg.select("rect")
.attr("width", "100%")
.attr("height", "100%");
svg.select('.y.axis')
.transition()
.duration(500)
.delay(200)
.call(yAxis);
chartWrapper.select("text")
.attr("x", (fw/2))
.attr("y", 0 - (margin.top/2))
.attr("text-anchor", "middle");
path
.transition()
.duration(1000)
.attr('d', line(data))
.attr("stroke-width", 3)
.attr("stroke", "url(#svgGradient)")
.attr("fill", "none");}
function updateDimensions(winWidth) {
margin.top = 40;
margin.right = winWidth < wbreakPoint ? 50 : 80;
margin.left = winWidth < wbreakPoint ? 0 : 50;
margin.bottom = 80;
width = winWidth - margin.left - margin.right;
height = .1 * width;}
return {render : render}
})(window,d3);
window.addEventListener('resize', Chart.render);
を次のようなjsonファイルの処理方法を理解できません。
[{"symbol":"ar1","lux":"20","date":"2017-08-12 15:40:34.363"},
{"symbol":"aw1","lux":"25","date":"2017-08-12 15:40:35.363"},
{"symbol":"ar1","lux":"2","date":"2017-08-12 15:49:34.363"},
{"symbol":"ar1","lux":"50","date":"2017-08-12 15:49:40.225"},
{"symbol":"aw1","lux":"20","date":"2017-08-12 15:49:48.363"},
{"symbol":"ar1","lux":"76","date":"2017-08-12 15:50:06.360"},
{"symbol":"ar1","lux":"116","date":"2017-08-12 15:58:14.115"},
{"symbol":"ar1","lux":"50","date":"2017-08-12 15:58:19.225"},
{"symbol":"ar1","lux":"132","date":"2017-08-12 15:59:00.100"}]
P.S：コード列と私の英語の膨大な量のために申し訳ありません;）