0
직장에서 시각화를 위해 d3을 사용하려고합니다.)d3에 데이터를로드하거나 데이터를 포함하는 매개 변수를 설정하는 방법은 무엇입니까?
가a)는 구분 된 파일 (는 파이어 폭스 버전에서는 작동에서 데이터로드가 우리 중 일부는
나이 : 내가 거기에 웹 서버 (권한 없음)를 설치할 수 없기 때문에, 나는 두 가지 옵션을 지원하려고 데이터를 html 태그에 포함 (복사)하는 것은 불행히도 d3.dsv()가 아니라 d3.csv.parse()를 사용합니다.
두 가지 모두를 지원하는 d3 프로그램을 만들려고했지만 예를 들어 변수 nameOfFile == ""이면 코드는 'pre'태그에서 데이터를 읽어야하고, 그렇지 않으면 파일을 구성해야합니다.
현재 프로그램이 b) 부분을 지원하고 있습니다 : 'pre'태그에서 데이터를 읽는 중입니다. 파일에서 읽기로 전환하려면 다음과 같이 3 : 0으로 줄을 주석으로 처리하려면 1 :, 2 : 4 :, 더하기 기호가있는 줄을 복원해야합니다.
누구보다 나에게 더 우아한 방법을 보여줄 수 있습니까? 와 (매개 변수를 분기하여)?
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Multiples Streamgraph</title>
<style>
body {
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 auto;
position: relative;
width: 960px;
}
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.group-label {
text-anchor: end;
}
pre#data {
display:none;
}
</style>
</head>
<body>
<pre id="data">
symbol,date,price
MSFT,Jan 2000,39.81
MSFT,Feb 2000,36.35
MSFT,Mar 2000,43.22
MSFT,Apr 2000,28.37
MSFT,May 2000,25.45
MSFT,Jun 2000,32.54
MSFT,Jul 2000,28.4
MSFT,Aug 2000,28.4
MSFT,Sep 2000,24.53
MSFT,Oct 2000,28.02
MSFT,Nov 2000,23.34
MSFT,Dec 2000,17.65
MSFT,Jan 2001,24.84
MSFT,Feb 2001,24
MSFT,Mar 2001,22.25
MSFT,Apr 2001,27.56
MSFT,May 2001,28.14
MSFT,Jun 2001,29.7
MSFT,Jul 2001,26.93
MSFT,Aug 2001,23.21
MSFT,Sep 2001,20.82
MSFT,Oct 2001,23.65
MSFT,Nov 2001,26.12
MSFT,Dec 2001,26.95
MSFT,Jan 2002,25.92
MSFT,Feb 2002,23.73
MSFT,Mar 2002,24.53
MSFT,Apr 2002,21.26
MSFT,May 2002,20.71
MSFT,Jun 2002,22.25
MSFT,Jul 2002,19.52
MSFT,Aug 2002,19.97
MSFT,Sep 2002,17.79
MSFT,Oct 2002,21.75
MSFT,Nov 2002,23.46
MSFT,Dec 2002,21.03
MSFT,Jan 2003,19.31
MSFT,Feb 2003,19.34
MSFT,Mar 2003,19.76
MSFT,Apr 2003,20.87
MSFT,May 2003,20.09
MSFT,Jun 2003,20.93
MSFT,Jul 2003,21.56
MSFT,Aug 2003,21.65
MSFT,Sep 2003,22.69
MSFT,Oct 2003,21.45
MSFT,Nov 2003,21.1
MSFT,Dec 2003,22.46
MSFT,Jan 2004,22.69
MSFT,Feb 2004,21.77
MSFT,Mar 2004,20.46
MSFT,Apr 2004,21.45
MSFT,May 2004,21.53
MSFT,Jun 2004,23.44
MSFT,Jul 2004,23.38
MSFT,Aug 2004,22.47
MSFT,Sep 2004,22.76
MSFT,Oct 2004,23.02
MSFT,Nov 2004,24.6
MSFT,Dec 2004,24.52
MSFT,Jan 2005,24.11
MSFT,Feb 2005,23.15
MSFT,Mar 2005,22.24
MSFT,Apr 2005,23.28
MSFT,May 2005,23.82
MSFT,Jun 2005,22.93
MSFT,Jul 2005,23.64
MSFT,Aug 2005,25.35
MSFT,Sep 2005,23.83
MSFT,Oct 2005,23.8
MSFT,Nov 2005,25.71
MSFT,Dec 2005,24.29
MSFT,Jan 2006,26.14
MSFT,Feb 2006,25.04
MSFT,Mar 2006,25.36
MSFT,Apr 2006,22.5
MSFT,May 2006,21.19
MSFT,Jun 2006,21.8
MSFT,Jul 2006,22.51
MSFT,Aug 2006,24.13
MSFT,Sep 2006,25.68
MSFT,Oct 2006,26.96
MSFT,Nov 2006,27.66
MSFT,Dec 2006,28.13
MSFT,Jan 2007,29.07
MSFT,Feb 2007,26.63
MSFT,Mar 2007,26.35
MSFT,Apr 2007,28.3
MSFT,May 2007,29.11
MSFT,Jun 2007,27.95
MSFT,Jul 2007,27.5
MSFT,Aug 2007,27.34
MSFT,Sep 2007,28.04
MSFT,Oct 2007,35.03
MSFT,Nov 2007,32.09
MSFT,Dec 2007,34
MSFT,Jan 2008,31.13
MSFT,Feb 2008,26.07
MSFT,Mar 2008,27.21
MSFT,Apr 2008,27.34
MSFT,May 2008,27.25
MSFT,Jun 2008,26.47
MSFT,Jul 2008,24.75
MSFT,Aug 2008,26.36
MSFT,Sep 2008,25.78
MSFT,Oct 2008,21.57
MSFT,Nov 2008,19.66
MSFT,Dec 2008,18.91
MSFT,Jan 2009,16.63
MSFT,Feb 2009,15.81
MSFT,Mar 2009,17.99
MSFT,Apr 2009,19.84
MSFT,May 2009,20.59
MSFT,Jun 2009,23.42
MSFT,Jul 2009,23.18
MSFT,Aug 2009,24.43
MSFT,Sep 2009,25.49
MSFT,Oct 2009,27.48
MSFT,Nov 2009,29.27
MSFT,Dec 2009,30.34
MSFT,Jan 2010,28.05
MSFT,Feb 2010,28.67
MSFT,Mar 2010,28.8
AMZN,Jan 2000,64.56
AMZN,Feb 2000,68.87
AMZN,Mar 2000,67
AMZN,Apr 2000,55.19
AMZN,May 2000,48.31
AMZN,Jun 2000,36.31
AMZN,Jul 2000,30.12
AMZN,Aug 2000,41.5
AMZN,Sep 2000,38.44
AMZN,Oct 2000,36.62
AMZN,Nov 2000,24.69
AMZN,Dec 2000,15.56
AMZN,Jan 2001,17.31
AMZN,Feb 2001,10.19
AMZN,Mar 2001,10.23
AMZN,Apr 2001,15.78
AMZN,May 2001,16.69
AMZN,Jun 2001,14.15
AMZN,Jul 2001,12.49
AMZN,Aug 2001,8.94
AMZN,Sep 2001,5.97
AMZN,Oct 2001,6.98
AMZN,Nov 2001,11.32
AMZN,Dec 2001,10.82
AMZN,Jan 2002,14.19
AMZN,Feb 2002,14.1
AMZN,Mar 2002,14.3
AMZN,Apr 2002,16.69
AMZN,May 2002,18.23
AMZN,Jun 2002,16.25
AMZN,Jul 2002,14.45
AMZN,Aug 2002,14.94
AMZN,Sep 2002,15.93
AMZN,Oct 2002,19.36
AMZN,Nov 2002,23.35
AMZN,Dec 2002,18.89
AMZN,Jan 2003,21.85
AMZN,Feb 2003,22.01
AMZN,Mar 2003,26.03
AMZN,Apr 2003,28.69
AMZN,May 2003,35.89
AMZN,Jun 2003,36.32
AMZN,Jul 2003,41.64
AMZN,Aug 2003,46.32
AMZN,Sep 2003,48.43
AMZN,Oct 2003,54.43
AMZN,Nov 2003,53.97
AMZN,Dec 2003,52.62
AMZN,Jan 2004,50.4
AMZN,Feb 2004,43.01
AMZN,Mar 2004,43.28
AMZN,Apr 2004,43.6
AMZN,May 2004,48.5
AMZN,Jun 2004,54.4
AMZN,Jul 2004,38.92
AMZN,Aug 2004,38.14
AMZN,Sep 2004,40.86
AMZN,Oct 2004,34.13
AMZN,Nov 2004,39.68
AMZN,Dec 2004,44.29
AMZN,Jan 2005,43.22
AMZN,Feb 2005,35.18
AMZN,Mar 2005,34.27
AMZN,Apr 2005,32.36
AMZN,May 2005,35.51
AMZN,Jun 2005,33.09
AMZN,Jul 2005,45.15
AMZN,Aug 2005,42.7
AMZN,Sep 2005,45.3
AMZN,Oct 2005,39.86
AMZN,Nov 2005,48.46
AMZN,Dec 2005,47.15
AMZN,Jan 2006,44.82
AMZN,Feb 2006,37.44
AMZN,Mar 2006,36.53
AMZN,Apr 2006,35.21
AMZN,May 2006,34.61
AMZN,Jun 2006,38.68
AMZN,Jul 2006,26.89
AMZN,Aug 2006,30.83
AMZN,Sep 2006,32.12
AMZN,Oct 2006,38.09
AMZN,Nov 2006,40.34
AMZN,Dec 2006,39.46
AMZN,Jan 2007,37.67
AMZN,Feb 2007,39.14
AMZN,Mar 2007,39.79
AMZN,Apr 2007,61.33
AMZN,May 2007,69.14
AMZN,Jun 2007,68.41
AMZN,Jul 2007,78.54
AMZN,Aug 2007,79.91
AMZN,Sep 2007,93.15
AMZN,Oct 2007,89.15
AMZN,Nov 2007,90.56
AMZN,Dec 2007,92.64
AMZN,Jan 2008,77.7
AMZN,Feb 2008,64.47
AMZN,Mar 2008,71.3
AMZN,Apr 2008,78.63
AMZN,May 2008,81.62
AMZN,Jun 2008,73.33
AMZN,Jul 2008,76.34
AMZN,Aug 2008,80.81
AMZN,Sep 2008,72.76
AMZN,Oct 2008,57.24
AMZN,Nov 2008,42.7
AMZN,Dec 2008,51.28
AMZN,Jan 2009,58.82
AMZN,Feb 2009,64.79
AMZN,Mar 2009,73.44
AMZN,Apr 2009,80.52
AMZN,May 2009,77.99
AMZN,Jun 2009,83.66
AMZN,Jul 2009,85.76
AMZN,Aug 2009,81.19
AMZN,Sep 2009,93.36
AMZN,Oct 2009,118.81
AMZN,Nov 2009,135.91
AMZN,Dec 2009,134.52
AMZN,Jan 2010,125.41
AMZN,Feb 2010,118.4
AMZN,Mar 2010,128.82
IBM,Jan 2000,100.52
IBM,Feb 2000,92.11
IBM,Mar 2000,106.11
IBM,Apr 2000,99.95
IBM,May 2000,96.31
IBM,Jun 2000,98.33
IBM,Jul 2000,100.74
IBM,Aug 2000,118.62
IBM,Sep 2000,101.19
IBM,Oct 2000,88.5
IBM,Nov 2000,84.12
IBM,Dec 2000,76.47
IBM,Jan 2001,100.76
IBM,Feb 2001,89.98
IBM,Mar 2001,86.63
IBM,Apr 2001,103.7
IBM,May 2001,100.82
IBM,Jun 2001,102.35
IBM,Jul 2001,94.87
IBM,Aug 2001,90.25
IBM,Sep 2001,82.82
IBM,Oct 2001,97.58
IBM,Nov 2001,104.5
IBM,Dec 2001,109.36
IBM,Jan 2002,97.54
IBM,Feb 2002,88.82
IBM,Mar 2002,94.15
IBM,Apr 2002,75.82
IBM,May 2002,72.97
IBM,Jun 2002,65.31
IBM,Jul 2002,63.86
IBM,Aug 2002,68.52
IBM,Sep 2002,53.01
IBM,Oct 2002,71.76
IBM,Nov 2002,79.16
IBM,Dec 2002,70.58
IBM,Jan 2003,71.22
IBM,Feb 2003,71.13
IBM,Mar 2003,71.57
IBM,Apr 2003,77.47
IBM,May 2003,80.48
IBM,Jun 2003,75.42
IBM,Jul 2003,74.28
IBM,Aug 2003,75.12
IBM,Sep 2003,80.91
IBM,Oct 2003,81.96
IBM,Nov 2003,83.08
IBM,Dec 2003,85.05
IBM,Jan 2004,91.06
IBM,Feb 2004,88.7
IBM,Mar 2004,84.41
IBM,Apr 2004,81.04
IBM,May 2004,81.59
IBM,Jun 2004,81.19
IBM,Jul 2004,80.19
IBM,Aug 2004,78.17
IBM,Sep 2004,79.13
IBM,Oct 2004,82.84
IBM,Nov 2004,87.15
IBM,Dec 2004,91.16
IBM,Jan 2005,86.39
IBM,Feb 2005,85.78
IBM,Mar 2005,84.66
IBM,Apr 2005,70.77
IBM,May 2005,70.18
IBM,Jun 2005,68.93
IBM,Jul 2005,77.53
IBM,Aug 2005,75.07
IBM,Sep 2005,74.7
IBM,Oct 2005,76.25
IBM,Nov 2005,82.98
IBM,Dec 2005,76.73
IBM,Jan 2006,75.89
IBM,Feb 2006,75.09
IBM,Mar 2006,77.17
IBM,Apr 2006,77.05
IBM,May 2006,75.04
IBM,Jun 2006,72.15
IBM,Jul 2006,72.7
IBM,Aug 2006,76.35
IBM,Sep 2006,77.26
IBM,Oct 2006,87.06
IBM,Nov 2006,86.95
IBM,Dec 2006,91.9
IBM,Jan 2007,93.79
IBM,Feb 2007,88.18
IBM,Mar 2007,89.44
IBM,Apr 2007,96.98
IBM,May 2007,101.54
IBM,Jun 2007,100.25
IBM,Jul 2007,105.4
IBM,Aug 2007,111.54
IBM,Sep 2007,112.6
IBM,Oct 2007,111
IBM,Nov 2007,100.9
IBM,Dec 2007,103.7
IBM,Jan 2008,102.75
IBM,Feb 2008,109.64
IBM,Mar 2008,110.87
IBM,Apr 2008,116.23
IBM,May 2008,125.14
IBM,Jun 2008,114.6
IBM,Jul 2008,123.74
IBM,Aug 2008,118.16
IBM,Sep 2008,113.53
IBM,Oct 2008,90.24
IBM,Nov 2008,79.65
IBM,Dec 2008,82.15
IBM,Jan 2009,89.46
IBM,Feb 2009,90.32
IBM,Mar 2009,95.09
IBM,Apr 2009,101.29
IBM,May 2009,104.85
IBM,Jun 2009,103.01
IBM,Jul 2009,116.34
IBM,Aug 2009,117
IBM,Sep 2009,118.55
IBM,Oct 2009,119.54
IBM,Nov 2009,125.79
IBM,Dec 2009,130.32
IBM,Jan 2010,121.85
IBM,Feb 2010,127.16
IBM,Mar 2010,125.55
AAPL,Jan 2000,25.94
AAPL,Feb 2000,28.66
AAPL,Mar 2000,33.95
AAPL,Apr 2000,31.01
AAPL,May 2000,21
AAPL,Jun 2000,26.19
AAPL,Jul 2000,25.41
AAPL,Aug 2000,30.47
AAPL,Sep 2000,12.88
AAPL,Oct 2000,9.78
AAPL,Nov 2000,8.25
AAPL,Dec 2000,7.44
AAPL,Jan 2001,10.81
AAPL,Feb 2001,9.12
AAPL,Mar 2001,11.03
AAPL,Apr 2001,12.74
AAPL,May 2001,9.98
AAPL,Jun 2001,11.62
AAPL,Jul 2001,9.4
AAPL,Aug 2001,9.27
AAPL,Sep 2001,7.76
AAPL,Oct 2001,8.78
AAPL,Nov 2001,10.65
AAPL,Dec 2001,10.95
AAPL,Jan 2002,12.36
AAPL,Feb 2002,10.85
AAPL,Mar 2002,11.84
AAPL,Apr 2002,12.14
AAPL,May 2002,11.65
AAPL,Jun 2002,8.86
AAPL,Jul 2002,7.63
AAPL,Aug 2002,7.38
AAPL,Sep 2002,7.25
AAPL,Oct 2002,8.03
AAPL,Nov 2002,7.75
AAPL,Dec 2002,7.16
AAPL,Jan 2003,7.18
AAPL,Feb 2003,7.51
AAPL,Mar 2003,7.07
AAPL,Apr 2003,7.11
AAPL,May 2003,8.98
AAPL,Jun 2003,9.53
AAPL,Jul 2003,10.54
AAPL,Aug 2003,11.31
AAPL,Sep 2003,10.36
AAPL,Oct 2003,11.44
AAPL,Nov 2003,10.45
AAPL,Dec 2003,10.69
AAPL,Jan 2004,11.28
AAPL,Feb 2004,11.96
AAPL,Mar 2004,13.52
AAPL,Apr 2004,12.89
AAPL,May 2004,14.03
AAPL,Jun 2004,16.27
AAPL,Jul 2004,16.17
AAPL,Aug 2004,17.25
AAPL,Sep 2004,19.38
AAPL,Oct 2004,26.2
AAPL,Nov 2004,33.53
AAPL,Dec 2004,32.2
AAPL,Jan 2005,38.45
AAPL,Feb 2005,44.86
AAPL,Mar 2005,41.67
AAPL,Apr 2005,36.06
AAPL,May 2005,39.76
AAPL,Jun 2005,36.81
AAPL,Jul 2005,42.65
AAPL,Aug 2005,46.89
AAPL,Sep 2005,53.61
AAPL,Oct 2005,57.59
AAPL,Nov 2005,67.82
AAPL,Dec 2005,71.89
AAPL,Jan 2006,75.51
AAPL,Feb 2006,68.49
AAPL,Mar 2006,62.72
AAPL,Apr 2006,70.39
AAPL,May 2006,59.77
AAPL,Jun 2006,57.27
AAPL,Jul 2006,67.96
AAPL,Aug 2006,67.85
AAPL,Sep 2006,76.98
AAPL,Oct 2006,81.08
AAPL,Nov 2006,91.66
AAPL,Dec 2006,84.84
AAPL,Jan 2007,85.73
AAPL,Feb 2007,84.61
AAPL,Mar 2007,92.91
AAPL,Apr 2007,99.8
AAPL,May 2007,121.19
AAPL,Jun 2007,122.04
AAPL,Jul 2007,131.76
AAPL,Aug 2007,138.48
AAPL,Sep 2007,153.47
AAPL,Oct 2007,189.95
AAPL,Nov 2007,182.22
AAPL,Dec 2007,198.08
AAPL,Jan 2008,135.36
AAPL,Feb 2008,125.02
AAPL,Mar 2008,143.5
AAPL,Apr 2008,173.95
AAPL,May 2008,188.75
AAPL,Jun 2008,167.44
AAPL,Jul 2008,158.95
AAPL,Aug 2008,169.53
AAPL,Sep 2008,113.66
AAPL,Oct 2008,107.59
AAPL,Nov 2008,92.67
AAPL,Dec 2008,85.35
AAPL,Jan 2009,90.13
AAPL,Feb 2009,89.31
AAPL,Mar 2009,105.12
AAPL,Apr 2009,125.83
AAPL,May 2009,135.81
AAPL,Jun 2009,142.43
AAPL,Jul 2009,163.39
AAPL,Aug 2009,168.21
AAPL,Sep 2009,185.35
AAPL,Oct 2009,188.5
AAPL,Nov 2009,199.91
AAPL,Dec 2009,210.73
AAPL,Jan 2010,192.06
AAPL,Feb 2010,204.62
AAPL,Mar 2010,223.02
</pre>
<form>
<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
<label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
<script>
(function() {
// 1: Modify here to set up you own data
var parseTimeFormat = "%b %Y"; // specify the time format reading time attribute in file.
var timeFormat = "%b %Y"; // specify the time format for x axis.
var nameOfFile = "streamgraph1.csv"; // name and path to the file
var delimiter = "," ; // specify delimiter of file
/* Examples for delimiters:
vertical bar: "|"
semicolon: ";"
comma: ","
space: " "
tab: "\t"
modify below if you data is embedded with the <pre> tag --> comment out '--file' lines
End of modification */
// end modify
var parseDate = d3.time.format("%b %Y").parse,
formatYear = d3.format("02d"),
formatDate = function(d) { return formatYear(d.getFullYear()); };
var margin = {top: 40, right: 20, bottom: 40, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
lineheight = height;
var yScaleStacked = d3.scale.linear().range([height, 0]),
yScaleMultiples = d3.scale.linear().range([height, 0]),
xScale = d3.time.scale().rangeRound([0, width]),
colorScale = d3.scale.ordinal().range(colorbrewer.Blues[5].reverse());
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(d3.time.years)
.tickFormat(formatDate);
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.group; });
var areaStacked = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return xScale(d.date); })
.y0(function(d) { return yScaleStacked(d.y0); })
.y1(function(d) { return yScaleStacked(d.y0 + d.y); });
var areaMultiples = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return xScale(d.date); })
.y0(function(d) { return lineheight; })
.y1(function(d) { return yScaleMultiples(d.value); });
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 + ")");
// 1 + 2: comment out the next two lines for embedded version
// 1: var dsv = d3.dsv(delimiter, "text/plain");
// 2: dsv(nameOfFile, function (error, data) {
// --embedded: comment out next line for file version
var data = d3.csv.parse(d3.select("pre#data").text()); // 3: :
console.log("initial data: ", data);
data.forEach(function(d) {
d.group = d.symbol
d.date = parseDate(d.date);
d.value = +d.price;
});
data.sort(function(a, b) {
return a.date - b.date;
});
var nested = nest.entries(data);
// console.log("Array nested", nested);
var layers = stack(nested);
lineheight = height/nested.length;
xScale.domain(d3.extent(data, function(d) { return d.date; }));
yScaleStacked.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
yScaleMultiples.domain([0, d3.max(data, function(d) { return d.value; })]).range([lineheight, 0]);
var group = svg.selectAll(".group")
.data(layers)
.enter().append("g")
.attr("class", "group")
.attr("id", function(d){ return d.key})
.attr('transform', function(d, i){ return "translate(0," + (height - (i+1) * lineheight) +")"; });
group.append("text")
.attr("class", "group-label")
.attr("x", -6)
.attr('transform', function(d, i){ return "translate(0," + (lineheight - 6) +")"; })
.text(function(d) { return d.key; });
group.append("path")
.attr("class", "layer")
.attr("d", function(d) { return areaMultiples(d.values); })
.style("fill", function(d, i) { return colorScale(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + 20) + ")")
.call(xAxis);
d3.selectAll("input").on("change", change);
function change() {
if (this.value === "multiples") transitionMultiples();
else transitionStacked();
}
function transitionMultiples() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr('transform', function(d, i){ return "translate(0," + (height - (i+1) * lineheight) +")"; });
g.selectAll(".layer").attr("d", function(d) { return areaMultiples(d.values); });
g.select(".group-label").attr('transform', function(d, i){ return "translate(0," + (lineheight - 6) +")"; });
}
function transitionStacked() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr('transform', function(){ return "translate(0,0)"; });
g.selectAll(".layer").attr("d", function(d) { return areaStacked(d.values); });
g.select(".group-label").attr('transform', function(d, i){ return "translate(0," + yScaleStacked(d.values[0].y0) +")"; });
}
// comment out next line for embedded version
// 4: });
})()
</script>
</body>
</html>
게시 및 시도 후; 나는 나 자신이 합리적인 해결책을 찾았다 고 생각한다. 는 경우 사람이 관심 :
마지막 섹션에서<!doctype html>
<!-- code until function (which I omit) is the same as above ... -->
(function() {
// 1: Modify here to set up you own data
var parseTimeFormat = "%b %Y"; // specify the time format reading time attribute in file.
var timeFormat = "%b %Y"; // specify the time format for x axis.
// var nameOfFile = "streamgraph1.csv"; // name and path to the file
var nameOfFile = "";
var delimiter = "," ; // specify delimiter of file
/* Examples for delimiters:
vertical bar: "|"
semicolon: ";"
comma: ","
space: " "
tab: "\t"
modify below if you data is embedded with the <pre> tag --> comment out '--file' lines
End of modification */
// end modify
var parseDate = d3.time.format("%b %Y").parse,
formatYear = d3.format("02d"),
formatDate = function(d) { return formatYear(d.getFullYear()); };
var margin = {top: 40, right: 20, bottom: 40, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
lineheight = height;
var yScaleStacked = d3.scale.linear().range([height, 0]),
yScaleMultiples = d3.scale.linear().range([height, 0]),
xScale = d3.time.scale().rangeRound([0, width]),
colorScale = d3.scale.ordinal().range(colorbrewer.Blues[5].reverse());
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(d3.time.years)
.tickFormat(formatDate);
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.group; });
var areaStacked = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return xScale(d.date); })
.y0(function(d) { return yScaleStacked(d.y0); })
.y1(function(d) { return yScaleStacked(d.y0 + d.y); });
var areaMultiples = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return xScale(d.date); })
.y0(function(d) { return lineheight; })
.y1(function(d) { return yScaleMultiples(d.value); });
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 + ")");
function processData (data) {
data.forEach(function(d) {
d.group = d.symbol
d.date = parseDate(d.date);
d.value = +d.price;
});
data.sort(function(a, b) {
return a.date - b.date;
});
return nest.entries(data);
}
function render(data) {
//console.log("data from file2: ", data);
var nested = processData(data);
var layers = stack(nested);
lineheight = height/nested.length;
xScale.domain(d3.extent(data, function(d) { return d.date; }));
yScaleStacked.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
yScaleMultiples.domain([0, d3.max(data, function(d) { return d.value; })]).range([lineheight, 0]);
var group = svg.selectAll(".group")
.data(layers)
.enter().append("g")
.attr("class", "group")
.attr("id", function(d){ return d.key})
.attr('transform', function(d, i){ return "translate(0," + (height - (i+1) * lineheight) +")"; });
group.append("text")
.attr("class", "group-label")
.attr("x", -6)
.attr('transform', function(d, i){ return "translate(0," + (lineheight - 6) +")"; })
.text(function(d) { return d.key; });
group.append("path")
.attr("class", "layer")
.attr("d", function(d) { return areaMultiples(d.values); })
.style("fill", function(d, i) { return colorScale(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + 20) + ")")
.call(xAxis);
d3.selectAll("input").on("change", change);
function change() {
if (this.value === "multiples") transitionMultiples();
else transitionStacked();
}
function transitionMultiples() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr('transform', function(d, i){ return "translate(0," + (height - (i+1) * lineheight) +")"; });
g.selectAll(".layer").attr("d", function(d) { return areaMultiples(d.values); });
g.select(".group-label").attr('transform', function(d, i){ return "translate(0," + (lineheight - 6) +")"; });
}
function transitionStacked() {
var t = svg.transition().duration(750),
g = t.selectAll(".group").attr('transform', function(){ return "translate(0,0)"; });
g.selectAll(".layer").attr("d", function(d) { return areaStacked(d.values); });
g.select(".group-label").attr('transform', function(d, i){ return "translate(0," + yScaleStacked(d.values[0].y0) +")"; });
}
}
if (nameOfFile != "") {
var dsv = d3.dsv(delimiter, "text/plain");
dsv(nameOfFile, function (error, data) {
console.log("data from file: ", data);
render(data);
});
}
else {
var data = d3.csv.parse(d3.select("pre#data").text());
console.log("embedded: ", data);
render(data);
}
})()
</script>
</body>
</html>
매우 간단합니다. 변수를 테스트하고 필요한 경우 dsv를 호출하는 것이 어떻습니까? –
매우 간단해야한다는 데 동의합니다. 방금 d3과 자바 스크립트로 시작했는데 큰 블록의 시작과 맨 끝을 주석 처리하기 때문에 내 솔루션은 매우 어색합니다. 그런 식으로, 나는 전에 변수를 테스트 할 수 없다. javascript에서 경험이있는 사람이라면 컨트롤 구조를 빠르게 변경하는 방법을 제안 할 수 있다고 생각합니다. 함수로 큰 블록을 팩킹하는 것일 수도 있습니다. 테스트를 통해 간단한 추가 라인이 잘 작동 할 것입니다. 어떤 도움이라도 대단히 감사합니다. – ee2Dev
마지막으로, 나는 합리적인 해결책이 있다고 생각합니다. 나를 격려해 주신 코드 베리타스에 감사드립니다. 위의 솔루션을 게시하겠습니다 ... – ee2Dev