Javascript 如何设置在d3中加载数据或嵌入数据的参数？
在工作中，我尝试使用d3进行可视化。由于我无法在没有权限的情况下安装web服务器，因此我尝试支持两个选项： 从带分隔符的文件加载数据确实适用于我们中的一些人使用的firefox版本 b将复制数据嵌入html标记不幸的是，它不适用于d3.dsv，而只适用于d3.csv.parse 我成功地设置了一个d3程序，它支持这两个选项，但是我想通过设置一个参数在这两个选项之间切换。例如，如果变量nameOfFile==则代码应从'pre'标记读取数据，否则形成文件 我当前的程序现在支持b部分：从“pre”标签读取数据。 要切换回从文件读取，我必须用1:、2:和4:恢复已注释掉的行，再加上用3:注释掉该行： 有谁能告诉我一个更优雅的方法，通过分支参数来完成吗Javascript 如何设置在d3中加载数据或嵌入数据的参数？,javascript,html,d3.js,loading,Javascript,Html,D3.js,Loading,在工作中，我尝试使用d3进行可视化。由于我无法在没有权限的情况下安装web服务器，因此我尝试支持两个选项： 从带分隔符的文件加载数据确实适用于我们中的一些人使用的firefox版本 b将复制数据嵌入html标记不幸的是，它不适用于d3.dsv，而只适用于d3.csv.parse 我成功地设置了一个d3程序，它支持这两个选项，但是我想通过设置一个参数在这两个选项之间切换。例如，如果变量nameOfFile==则代码应从'pre'标记读取数据，否则形成文件 我当前的程序现在支持b部分：从“pre”标
<!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>
if (typeof nameOfFile !== 'undefined') {
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);
}
在上一节中，用这种方式检查变量的存在性，而不是检查它是否为value。这更符合逻辑和语义
看起来很简单。为什么不测试一个变量并在必要时调用dsv呢？我同意它必须非常简单。我刚开始使用d3和javascript，我的解决方案非常笨拙，因为我注释了一个大块的开头和结尾。这样，我以前就不能测试变量了。我认为任何有javascript经验的人都可以建议如何快速更改控件结构，或者将大的块打包到一个函数中？这样一个带有测试的简单的额外行就可以很好地工作。非常感谢您的帮助。最后，我想我有一个合理的解决方案。感谢code veritas对我的鼓励：我将在上面发布我的解决方案……太好了。不过，下次把它作为答案放在自己的盒子里。这可能会帮助将来有同样问题的人了解你是如何解决这个问题的。谢谢！我想将代码作为注释发布，但没有看到我可以发布额外的答案。下次我会做的！我将使用你的if条件。然后，当我不从文件加载时，我只对nameOfFile的定义进行注释。
if (typeof nameOfFile !== 'undefined') {
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);
}