有人知道一种方法，我可以使用循环来取代代码的部分，一切都是相同的，除了索引
Does anyone know a way I can use a loop to replace the parts of the code where everything is identical except for the index?
当前代码将csv文件转换为图形。我的整个html文件由以下代码组成:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title> Test Graph </title>
<style> /* set the CSS */
svg { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2.5;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<h2 align="center"> Test Graph </h2>
<data src = "data.csv"></data>
<!-- load the d3.js library -->
<!-- Also on http://d3js.org/d3.v3.min.js -->
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%x").parse;
var formatTime = d3.time.format("%B %e, %Y");
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(3);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(25);
var dataBase = [
{
valueline:"",
columnline:"First",
dataVar:"",
dataName:"First",
colorcode:"#FF0000"
},
{
valueline:"",
columnline:"Second",
dataVar:"",
dataName:"Second",
colorcode:"#FF8000"
},
{
valueline:"",
columnline:"Third",
dataVar:"",
dataName:"Third",
colorcode:"#FFFF00"
},
{
valueline:"",
columnline:"Fourth",
dataVar:"",
dataName:"Fourth",
colorcode:"#00FF00"
},
{
valueline:"",
columnline:"Fifth",
dataVar:"",
dataName:"Fifth",
colorcode:"#00FFFF"
},
{
valueline:"",
columnline:"Sixth",
dataVar:"",
dataName:"Sixth",
colorcode:"#0080FF"
},
{
valueline:"",
columnline:"Seventh",
dataVar:"",
dataName:"Seventh",
colorcode:"#0000FF"
},
{
valueline:"",
columnline:"Eighth",
dataVar:"",
dataName:"Eighth",
colorcode:"#FF00FF"
},
{
valueline:"",
columnline:"Ninth",
dataVar:"",
dataName:"Ninth",
colorcode:"#000000"
}
];
// Define the line
dataBase[0].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[0].columnline]); });
dataBase[1].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[1].columnline]); });
dataBase[2].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[2].columnline]); });
dataBase[3].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[3].columnline]); });
dataBase[4].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[4].columnline]); });
dataBase[5].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[5].columnline]); });
dataBase[6].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[6].columnline]); });
dataBase[7].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[7].columnline]); });
dataBase[8].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[8].columnline]); });
// Adds the svg canvas
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right + 170)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var singleData = false;
// Get the data
drawGraph = function(error, data) {
data.forEach(function(d) {
d["Date"] = parseDate(d["Date"]);
for (i = 0; i < dataBase.length; i++) {
d[dataBase[i].columnline] =
+d[dataBase[i].columnline];
}
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d["Date"]; }));
y.domain([0, d3.max(data, function(d) {
var maxim = d[dataBase[0].columnline];
for (var i = 1; i < dataBase.length; i++) {
if (d[dataBase[i].columnline] > maxim) {
maxim = d[dataBase[i].columnline];
}
}
return maxim;
})]);
var dataVars = ["","","","","","","",""];
dataBase[0].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 0)));
// Add the valueline path.
dataBase[0].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[0].colorcode)
.attr("d", dataBase[0].valueline(data));
dataBase[0].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[0].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[0].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[0].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[0].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 0)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[0].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 0) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[0].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 0)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[0].dataName);
dataBase[1].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 1)));
// Add the valueline path.
dataBase[1].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[1].colorcode)
.attr("d", dataBase[1].valueline(data));
dataBase[1].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[1].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[1].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[1].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[1].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 1)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[1].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 1) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[1].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 1)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[1].dataName);
dataBase[2].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 2)));
// Add the valueline path.
dataBase[2].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[2].colorcode)
.attr("d", dataBase[2].valueline(data));
dataBase[2].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[2].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[2].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[2].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[2].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 2)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[2].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 2) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[2].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 2)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[2].dataName);
dataBase[3].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 3)));
// Add the valueline path.
dataBase[3].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[3].colorcode)
.attr("d", dataBase[3].valueline(data));
dataBase[3].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[3].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[3].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[3].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[3].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 3)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[3].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 3) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[3].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 3)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[3].dataName);
dataBase[4].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 4)));
// Add the valueline path.
dataBase[4].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[4].colorcode)
.attr("d", dataBase[4].valueline(data));
dataBase[4].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[4].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[4].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[4].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[4].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 4)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[4].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 4) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[4].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 4)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[4].dataName);
dataBase[5].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 5)));
// Add the valueline path.
dataBase[5].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[5].colorcode)
.attr("d", dataBase[5].valueline(data));
dataBase[5].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[5].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[5].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[5].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[5].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 5)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[5].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 5) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[5].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 5)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[5].dataName);
dataBase[6].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 6)));
// Add the valueline path.
dataBase[6].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[6].colorcode)
.attr("d", dataBase[6].valueline(data));
dataBase[6].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[6].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[6].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[6].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[6].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 6)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[6].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 6) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[6].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 6)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[6].dataName);
dataBase[7].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 7)));
// Add the valueline path.
dataBase[7].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[7].colorcode)
.attr("d", dataBase[7].valueline(data));
dataBase[7].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[7].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[7].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[7].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[7].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 7)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[7].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 7) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[7].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 7)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[7].dataName);
dataBase[8].dataVar = svg.append("g")
.attr("id", ("data " + (1 + 8)));
// Add the valueline path.
dataBase[8].dataVar.append("path")
.attr("class", "line")
.style("stroke", dataBase[8].colorcode)
.attr("d", dataBase[8].valueline(data));
dataBase[8].dataVar.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.0)
.style("fill", dataBase[8].colorcode)
.attr("cx", function(d) { return x(d["Date"]); })
.attr("cy", function(d) {
return y(d[dataBase[8].columnline]);
})
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d["Date"]) + "<br/>" +
"Quantity: " + d[dataBase[8].columnline])
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
dataBase[8].dataVar.append("rect")
.attr("x", width + 150)
.attr("y", 25 * 8)
.attr("width", 18)
.attr("height", 18)
.style("fill", dataBase[8].colorcode)
.on("click", function(d) {
if (singleData) {
singleData = false;
svg.selectAll("g").remove();
d3.csv("data.csv", drawGraph);
}
else {
singleData = true;
for (j = 0; j < dataBase.length; j++) {
if (j != 8) {
dataBase[j].dataVar.remove();
}
}
}
});
dataBase[8].dataVar.append("text")
.attr("x", width + 145)
.attr("y", 9 + 25 * 8)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(dataBase[8].dataName);
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
d3.csv("data.csv", drawGraph);
</script>
</body>
</html>
上面代码以图形形式显示的csv文件的内容为:
Date,First,Second,Third,Fourth,Fifth,Sixth,Seventh,Eighth,Ninth
5/10/2013,0,15,30,45,60,75,90,105,120
5/13/2013,5,20,35,50,65,80,95,110,125
5/14/2013,10,25,40,55,70,85,100,115,130
5/15/2013,15,30,45,60,75,90,105,120,135
5/16/2013,20,35,50,65,80,95,110,125,140
5/17/2013,25,40,55,70,85,100,115,130,145
5/20/2013,30,45,60,75,90,105,120,135,150
5/21/2013,35,50,65,80,95,110,125,140,155
5/22/2013,40,55,70,85,100,115,130,145,160
5/23/2013,45,60,75,90,105,120,135,150,165
5/24/2013,50,65,80,95,110,125,140,155,170
5/28/2013,55,70,85,100,115,130,145,160,175
5/29/2013,60,75,90,105,120,135,150,165,180
5/30/2013,65,80,95,110,125,140,155,170,185
5/31/2013,70,85,100,115,130,145,160,175,190
6/3/2013,75,90,105,120,135,150,165,180,195
6/4/2013,80,95,110,125,140,155,170,185,200
6/5/2013,85,100,115,130,145,160,175,190,205
6/6/2013,90,105,120,135,150,165,180,195,210
6/7/2013,95,110,125,140,155,170,185,200,215
6/10/2013,100,115,130,145,160,175,190,205,220
6/12/2013,105,120,135,150,165,180,195,210,225
6/13/2013,110,125,140,155,170,185,200,215,230
6/17/2013,115,130,145,160,175,190,205,220,235
6/18/2013,120,135,150,165,180,195,210,225,240
6/19/2013,125,140,155,170,185,200,215,230,245
6/20/2013,130,145,160,175,190,205,220,235,250
6/21/2013,135,150,165,180,195,210,225,240,255
6/24/2013,140,155,170,185,200,215,230,245,260
6/25/2013,145,160,175,190,205,220,235,250,265
6/26/2013,150,165,180,195,210,225,240,255,270
6/27/2013,155,170,185,200,215,230,245,260,275
6/28/2013,160,175,190,205,220,235,250,265,280
7/1/2013,165,180,195,210,225,240,255,270,285
7/2/2013,170,185,200,215,230,245,260,275,290
7/3/2013,175,190,205,220,235,250,265,280,295
7/5/2013,180,195,210,225,240,255,270,285,300
7/8/2013,185,200,215,230,245,260,275,290,305
7/9/2013,190,205,220,235,250,265,280,295,310
7/10/2013,195,210,225,240,255,270,285,300,315
7/11/2013,200,215,230,245,260,275,290,305,320
7/12/2013,205,220,235,250,265,280,295,310,325
有很多行，我可以节省很多空间，如果我使用循环来替换这些行，编辑代码会容易得多。问题是，当我创建某些循环时，代码会崩溃，因为我在作用域上有问题。
这是我试图用循环替换的javascript代码的一部分。
dataBase[0].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[0].columnline]); });
dataBase[1].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[1].columnline]); });
dataBase[2].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[2].columnline]); });
dataBase[3].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[3].columnline]); });
dataBase[4].valueline = d3.svg.line()
.x(function(d) { return x(d["Date"]); })
.y(function(d) { return y(d[dataBase[4].columnline]); });
//等等…
下面是我用来解决作用域问题的代码:
function xFunc(d) {
return function (d) { return x(d["Date"]) };
}
function yFunc(d, i) {
return function (d) { return y(d[dataBase[i].columnline]) };
}
for (var i = 0; i < dataBase.length; i++) {
dataBase[i].valueline = d3.svg.line()
.x(xFunc(d))
.y(yFunc(d, i));
}
但是，当我使用该代码来替换valueline代码时，图形最终在html文件中根本不显示。到目前为止，绑定方法还没有起作用。有人知道一种方法，我可以成功地创建一个循环，可以做同样的事情，因为使用多行代码?
d是D3传递的，不是你传递的。此时你调用xFunc和yFunc, d不存在，你可能得到一个ReferenceError。将它从函数的签名中删除。
同样，由于xFunc不依赖于循环变量，因此不需要在每次迭代中都让它返回一个函数。
function xFunc(d) {
return x(d["Date"]) };
}
function yFunc(i) {
return function (d) { return y(d[dataBase[i].columnline]) };
}
for (var i = 0; i < dataBase.length; i++) {
dataBase[i].valueline = d3.svg.line()
.x(xFunc)
.y(yFunc(i));
}
学习如何调试JavaScript
相关文章：
- 从桌面读取python文件时高亮显示代码
- 名称输入的索引
- 如何将函数包装在函数中以避免代码重复
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- 货币代码为欧元-金额的格式不应包含小数
- 在jQuery中获取表的行索引
- Regex代码只允许一个空格
- 测试索引值是否等于某个数字的倍数
- 如何将屏幕分辨率乘以 80%，然后在代码中使用
- 未定义的索引-表单不通过javascript将值发送到php代码
- 用于查找在 jQuery 元素集中具有特定类的元素的索引的单行代码
- 基于钛的NFC应用程序仅在NFC代码位于索引.js中时才有效
- 为什么选择索引在此代码中不起作用
- 第三方(随机网站访问者）是否有可能通过 php 表单更新.html索引文件中的某些.js代码
- 未定义的索引:处理此 AJAX 代码时的名称
- 有人知道一种方法，我可以使用循环来取代代码的部分，一切都是相同的，除了索引
- 删除索引网站的代码历史记录?可能的
- 获取收割'javascript中的s$索引(代码隐藏）
- 未定义的索引错误(代码点火器）
- 是否有一种方法来拉所有选择菜单的选定索引在我的html中添加值到我选择的不同数组.很多代码为1选择菜单
