1
我是新的JavaScript所以需要一些。 我正在使用d3js庫在我的頁面上呈現圖表。
上週我遇到了一個名爲responsive chat visualization或類似的東西。現在我試圖找到一種方式，讓他們以更好的方式一起工作。我希望有人能幫我找到解決辦法。 我有一個簡單HTML頁從json文件D3js多行圖表
<div id="chart"></div><script src="js/chart2.js"></script>
腳本：
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文件看起來像這樣：
[{"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文件：
[{"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：對不起，代碼串的數量巨大，我的英語;）