我试图理解D3示例中的这个Javascript代码是如何工作的。对我来说没有意义的部分是xScale函数中的yScale和buildLine()“函数”。
取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>
答案 0 :(得分：3)
好的javascript有first class functions所以xScale是一个包含函数的变量。这意味着你可以传递并调用它。
更具体地说，您发布的第一个代码段构建了一个函数，该函数接受.domain([d3.min ..., d3.max ... ])指定的时间间隔内的值，并返回.range([0, w])指定的时间间隔内的值。它还说函数返回的值应该是＆＃34; nice＆＃34; （.nice()），即截断为不具有多个小数。根据这些规范构建的函数将分配给xScale变量。
稍后，您在d3.svg.line生成器中使用此函数，就像d3.scale.linear生成（因此，生成器）函数的函数/对象一样，在这种情况下一个函数，当提供数据集作为输入时，返回一个字符串，您可以将其用作svg d元素的path属性以绘制所需的路径。此函数已分配给变量lineFun（Fun部分！）。
使用d3.svg.line生成器构建的lineFun函数将数据集作为输入：
lineFun(ds.monthlySales)
并且，对于数据集中的每个数据点，它将其作为输入传递给访问器函数（d参数来自的地方），以便它们可以从中创建ax和y值并为数据点。因此，访问器函数是接受数据点并返回值的函数，通常根据数据点的某些属性。所以，例如：
function (d) {return xScale(d.month);
给定数据点d，返回xScale函数在传递数据点的month属性作为输入时返回的值。
我知道我没有写出最明确的解释，但我希望它可以帮到你一点。
关键点是：
d3.scale.linear和d3.svg.line是生成器：它们构建并返回一个函数来自https://github.com/mbostock/d3/wiki/SVG-Shapes#path-data-generators
路径生成器（例如d3.svg.line返回的路径生成器）既是对象又是函数。也就是说：您可以像任何其他函数一样调用生成器，并且生成器具有更改其行为的其他方法。与D3中的其他类一样，路径生成器遵循方法链接模式，其中setter方法返回生成器本身，允许在简洁语句中调用多个setter。