【发布时间】：2016-03-09 19:06:52
【问题描述】：
我试图从 D3 示例中了解这段 Javascript 代码的工作原理。对我来说没有意义的部分是buildLine() 函数中的xScale 和yScale“函数”。
以xScale为例，它看起来像一个简单的变量，被实例化为一个值：
var xScale = d3.scale.linear()
.domain([
d3.min(ds.monthlySales, function(d){ return d.month;}) ,
d3.max(ds.monthlySales, function(d){ return d.month;})
])
.range([0, w])
.nice();
...但在buildLine() 的下方，它们似乎也被称为函数：
var lineFun = d3.svg.line()
.x(function (d) {return xScale(d.month); } )
.y(function (d) {return yScale(d.sales); })
.interpolate("linear");
更具体地说，在：
.x(function (d) {return xScale(d.month); } )
...我不明白 d 的 值 来自哪里（以及它如何具有 .month 属性），最重要的是它是如何产生的 由xScale“函数”接收。
我认为我需要理解 Javascript 的一个基本原理才能使这段代码有意义，但那可能是什么？
基础数据可以在这里看到：
https://github.com/bsullins/d3js-resources/blob/master/monthlySalesbyCategoryMultiple.json
整个源代码：
<!DOCTYPE html>
<html>
<head>
<script src="d3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var h=100;
var w=400;
var padding = 20;
//build line
function buildLine(ds) {
console.log('xscale-max: '+ d3.max(ds.monthlySales, function (d){ return d.month; }));
console.log('yscale-max: '+ d3.max(ds.monthlySales, function (d){ return d.sales; }));
//scales
var xScale = d3.scale.linear()
.domain([
d3.min(ds.monthlySales, function(d){ return d.month;}) ,
d3.max(ds.monthlySales, function(d){ return d.month;})
])
.range([0, w])
.nice();
var yScale = d3.scale.linear()
.domain([0, d3.max(ds.monthlySales, function(d){ return d.sales;})])
.range([h,0])
.nice();
var lineFun = d3.svg.line()
.x(function (d) {return xScale(d.month); } )
.y(function (d) {return yScale(d.sales); })
.interpolate("linear");
var svg = d3.select("body").append("svg").attr({ width:w, height:h});
var viz = svg.append("path")
.attr({
d: lineFun(ds.monthlySales),
"stroke" : "purple",
"stroke-width": 2,
"fill" : "none"
});
}
//show header
function showHeader(ds) {
d3.select("body").append("h1")
.text(ds.category + " Sales (2013)");
}
//get data and draw things
d3.json("https://api.github.com/repos/bsullins/d3js-resources/contents/monthlySalesbyCategoryMultiple.json", function(error, data) {
if(error) {
console.log(error);
} else {
console.log(data); //we're golden!
}
var decodedData = JSON.parse(window.atob(data.content));
console.log(decodedData.contents);
decodedData.contents.forEach(function(content){
ds=content;
console.log(ds);
showHeader(ds);
buildLine(ds);
})
});
</script>
</body>
</html>
【问题讨论】：
-
这就是所谓的
callback function。您正在将函数作为参数传递给另一个方法。当该方法完成时，它回调到您传入的函数。它同时发送d。 （在这种情况下，它似乎是一个对象。）您可以匿名传递函数（和内联，就像您在此处所做的那样），或者您可以在其他地方命名它们并传递它们，如果这样更容易可视化的话。 -
d 是每一行中的项目。基本上与集合相关联使用。
标签： javascript d3.js