这个d3代码在哪里执行

where is this d3 code executed?

本文关键字：执行 在哪里 代码 d3 这个      更新时间：2023-09-26

我在https://www.dashingd3js.com/svg-paths-and-d3js今天我突然想到，所有的d3代码都是可变语句；似乎没有什么可以"调用"它并说"现在使用这些变量定义来绘制svg对象"。所以我的问题是：调用发生在哪里。调用是否在d3.min.js代码中？或者是关于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>

我认为您想要实现的关键是"append"方法。

如果你拿这条分界线为例。。。

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

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

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

var lineGraph = svgContainer.append("path")

我们现在在svg内部添加了一个"路径"。

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

好吧，你的问题更多的是关于Javascript是如何工作的。顾名思义，Javascript是一种脚本语言。

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

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

所以回答你的问题。由于上面的代码中没有事件，浏览器在看到代码的那一刻就开始执行代码。

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

我试着用非常简单的术语来解释，如果你还有什么问题可以问的话。

执行<script>标记中的内容。 
var lineFunction = d3.svg.line()

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

相关文章：