d3（或JavaScript）：在另一个函数中使用局部变量

Question

我被困在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) {

//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);           

});

那么，这是局部变量还是全局变量的问题，还是与我绘制多个SVG有关？

它应该是这样的： （但第一行的长度有所不同）。

我该如何实现？

非常感激你的帮助！

谢谢伊娃

这是“ data_test.csv”：

country,uni,uniAcc
Sweden,1.6,1.1
Germany,1,1.5
Poland,0.7,1

Answer 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()
            .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");   



});

这是工作版本-http://lunobus.com/threelines2/