d3（或JavaScript）：在另一个函数中使用局部变量 [英] d3 (or JavaScript): use local variable in another function
本文介绍了d3（或JavaScript）：在另一个函数中使用局部变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我被困在d3.js中。
我正在绘制多个SVG画布，其中线的长度由数据决定。数据的每一行都映射到其自己的SVG。
无法正常工作的是在另一行的结尾处绘制一条线。我的代码在我输入数据之前工作。但现在只要我添加一个数据值（egduni），第二行总是绘制在相同的位置，即由JS确定的最后一个位置。
这里是代码：
var w = 300;
var h = 250;
var stemL = 100;
var catX1 = 0;
var catY1 = 0;
var catX2 = 0;
var catY2 = 0;
var subCatX1 = 0;
var subCatY1 = 0;
var length1 = 80;
var length2 = 40;
var angle1 = -1.2;
var angleF = 0.7;
d3.csv（data_test.csv，function（data）{
//创建SVG元素
var svg = d3.select ）
.selectAll（svg）
.data（data）
.enter（）
.append（svg）
。 ，w）
.attr（height，h）
.append（g）
// Cat 1
svg.append ）
.attr（x1，function（）{catX1 = w / 2; return catX1}）
.attr（y1，function（）{catY1 = h - stemL; return catY1} ）
.attr（x2，function（d）{catX2 = catX1 + length1 * d.uni * Math.sin（angle1）; return catX2}）
.attr（y2 （d）{catY2 = catY1-length1 * d.uni * Math.cos（angle1）; return catY2}）
.style（stroke，steelblue）
.style width，5）;
// Cat 1 - uni Acc
svg.append（line）
.attr（x1，catX2）
.attr（y1，catY2）
.attr（x2，function（d）{subCatX2 = catX2 + length2 * d.uniAcc * Math.sin（angle1 - angleF）; return subCatX2;}）
.attr（y2，function（d）{subCatY2 = catY2 - length2 * d.uniAcc * Math.cos（angle1 - angleF）; return subCatY2;}）
.style（stroke，steelblue）
.style（stroke-width，3）;
}）;
所以，这是局部变量还是全局变量的问题，还是与事实有关我正在绘制多个SVG？
这应该是这样：（但是第一行的长度不同）。
如何实现这一目标？
感谢
Ewa
country，uni，uniAcc
瑞典，1.6,1.1
德国，1,1.5
波兰，0.7,1
解决方案
以这种方式：
var w = 300;
var h = 250;
var stemL = 100;
var catX1 = 0;
var catY1 = 0;
var catX2 = 0;
var catY2 = 0;
var subCatX1 = 0;
var subCatY1 = 0;
var length1 = 80;
var length2 = 40;
var angle1 = -1.2;
var angleF = 0.7;
catX1 = w / 2;
catY1 = h - stemL;
d3.csv（data_test.csv，function（data）{
var lineFunction = d3.svg.line b $ b .x（function（d）{return dx;}）
.y（function（d）{return dy;}）;
//创建SVG元素
var svg = d3.select（body）
.selectAll（svg）
.data（data）
.enter （svg）
.attr（width，w）
.attr（height，h）
.append（g）;
$ b b
svg.append（path）。attr（d，function（d）{
var lineData = [{ x：catX1，
y：catY1}，
{x：function（）{catX2 = catX1 + length1 * d.uni * Math.sin（angle1） ; return catX2}（），
y：function（）{catY2 = catY1 - length1 * d.uni * Math.cos（angle1）; return catY2}（）}，
$ b b {x：function（）{catX2 = catX1 + length1 * d.uni * Math.sin（angle1）; return catX2}（），
y：function（）{catY2 = catY1 - length1 * d.uni * Math.cos（angle1）; return catY2}（）}，
{x：function（）{subCatX2 = catX2 + length2 * d.uniAcc * Math.sin（angle1 - angleF）; return subCatX2;}（），
y：function（）{subCatY2 = catY2 - length2 * d.uniAcc * Math.cos（angle1 - angleF）; return subCatY2;}（）}
];
return lineFunction（lineData）;
}）
.style（stroke，steelblue）
.style（stroke-width，3）
.attr（fill ）;
}）;
这里是工作版本 - http://lunobus.com/threelines2/
I'm stuck in d3.js.
I'm drawing multiple SVG canvas with lines, where the length of the lines is determined by data. Each row of the data is mapped to its own SVG.
What's not working properly is to draw a line at the end of another line. My code worked before I entered the data. But now as soon as I add a data value (e.g. d.uni), the second line is always drawn at the same position, namely at the last position determined by JS.
Here is the code:
var w = 300;
var h = 250;
var stemL = 100;
var catX1 = 0;
var catY1 = 0;
var catX2 = 0;
var catY2 = 0;
var subCatX1 = 0;
var subCatY1 = 0;
var length1 = 80;
var length2 = 40;
var angle1 = -1.2;
var angleF = 0.7;
d3.csv("data_test.csv", function(data) {
//Create SVG element
var svg = d3.select("body")
.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
// Cat 1
svg.append("line")
.attr("x1", function() {catX1 = w/2; return catX1})
.attr("y1", function() {catY1 = h - stemL; return catY1})
.attr("x2", function(d) {catX2 = catX1 + length1 * d.uni * Math.sin(angle1); return catX2})
.attr("y2", function(d) {catY2 = catY1 - length1 * d.uni * Math.cos(angle1); return catY2})
.style("stroke", "steelblue")
.style("stroke-width", 5);
// Cat 1 - uni Acc
svg.append("line")
.attr("x1", catX2)
.attr("y1", catY2)
.attr("x2", function(d) {subCatX2 = catX2 + length2 * d.uniAcc * Math.sin(angle1 - angleF); return subCatX2;})
.attr("y2", function(d) {subCatY2 = catY2 - length2 * d.uniAcc * Math.cos(angle1 - angleF); return subCatY2;})
.style("stroke", "steelblue")
.style("stroke-width", 3);
});
So, is this a problem of local vs. global variables or does it have to do with the fact that I'm drawing multiple SVG?
This is how it should look like: (but with varying lengths of the first line).
How can I achieve this?
Your help is very much appreciated!
Thanks Ewa
Here is the "data_test.csv":
country,uni,uniAcc
Sweden,1.6,1.1
Germany,1,1.5
Poland,0.7,1
解决方案
It can be done this way:
var w = 300;
var h = 250;
var stemL = 100;
var catX1 = 0;
var catY1 = 0;
var catX2 = 0;
var catY2 = 0;
var subCatX1 = 0;
var subCatY1 = 0;
var length1 = 80;
var length2 = 40;
var angle1 = -1.2;
var angleF = 0.7;
catX1 = w/2;
catY1 = h - stemL;
d3.csv("data_test.csv", function(data) {
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
//Create SVG element
var svg = d3.select("body")
.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g");
svg.append("path").attr("d", function(d){
var lineData = [ { "x": catX1,
"y": catY1 },
{ "x": function() {catX2 = catX1 + length1 * d.uni * Math.sin(angle1); return catX2}(),
"y": function() {catY2 = catY1 - length1 * d.uni * Math.cos(angle1); return catY2}() },
{ "x": function() {catX2 = catX1 + length1 * d.uni * Math.sin(angle1); return catX2}(),
"y": function() {catY2 = catY1 - length1 * d.uni * Math.cos(angle1); return catY2}() },
{ "x": function() {subCatX2 = catX2 + length2 * d.uniAcc * Math.sin(angle1 - angleF); return subCatX2;}(),
"y": function() {subCatY2 = catY2 - length2 * d.uniAcc * Math.cos(angle1 - angleF); return subCatY2;}() }
];
return lineFunction(lineData);
})
.style("stroke", "steelblue")
.style("stroke-width", 3)
.attr("fill", "none");
});
Here is working version - http://lunobus.com/threelines2/
这篇关于d3（或JavaScript）：在另一个函数中使用局部变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
