Question

我今天正在审核以下https://www.assetstore.unity3d.com/en/#!/content/27216的代码。在我看来，所有d3代码都是变量语句;似乎没有什么＆＃34;调用＆＃34;然后说＆＃34;现在使用这些变量定义来绘制svg对象＆＃34;。所以我的问题是：调用发生在哪里。是在d3.min.js代码中的调用吗？或者是var定义var语句的方式还是其他什么？感谢您对这个基本问题的帮助。

同样是的：我确实试着用谷歌推理自己一个小时左右。如果不是最后的手段，我就不会在此之后发帖。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>   
<script>
var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
                        .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                   .attr("width", 200)
                                    .attr("height", 200);

//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

</script>
</body>
</html>

Answer 1

嗯，您的问题更多是关于Javascript的工作原理。顾名思义Javascript是一种脚本语言。

根据您希望JavaScript代码执行的操作以及如何构建它，它将在文件加载后立即执行或等待触发事件（如单击或加载）。

与编译语言不同，JS按语句执行代码语句。

所以回答你的问题。由于上述代码中没有事件，浏览器会在看到代码时开始执行代码。

var lineFunction = d3.svg.line() is a function and browser evaluates it when it encounter it.

如果您有任何疑问，我可以用非常简单的方式解释它。

Answer 2

我认为你想要达到的关键是'追加'方法。

如果以此部分行为例......

var svgContainer = d3.select("body").append("svg")

d3找到了'body'元素，现在它已经创建了一个新的'svg元素。

然后你会看到另一条类似的线......

var lineGraph = svgContainer.append("path")

我们现在在svg内添加了“路径”。

之前创建的'lineFunction'是一个基本上返回路径坐标值的函数（你可以给它一个返回值的函数，而不仅仅是一个值），这就是它。其余的只是各个元素的属性。

Answer 3

执行<script>代码中的内容。

var lineFunction = d3.svg.line()

表示调用方法d3.svg.line并将结果返回到lineFunction

这个d3代码在哪里执行？

3 个答案: