D3.js 构建条形图时的问题

Question

Freshboy 在创建我的第一个条形图时遇到了几个问题 D3.js:

第 30 行 -- console.log(yScale); 控制台显示“function.....”，这是什么？ ;最后一行--为什么我给的时候能得到每一栏的正确答案 “高度” 值 “yScale”。那里发生了什么？
.attr("x", function(data, i){return xScale(i)}) xScale 是变量而不是函数。为什么我可以像函数一样使用xScale--xScale(i)?

var data = [4,8,15,16,23,42];

const svg = d3.select("svg");

const margin = {top:25, right:25, bottom:25, left:25};

const xDomain = [0,5];
const xRange = [0,200];
const yDomain = [0,42];
const yRange = [0,200];
const rectWidth = 200 / 6;

const xScale = d3.scaleLinear()
    .domain(xDomain)
    .range(xRange);
var yScale = d3.scaleLinear()
    .domain(yDomain)
    .range(yRange);

const g = svg.append("g")
    .attr("transform", "translate(50,50)");

createRect = g.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(data, i){return xScale(i)})
    .attr("y", function(data,i){
        console.log(yScale(data));
        console.log(yScale);
        return 200-yScale(data)})
    .attr("width", rectWidth)
    .attr("height", yScale);

<!DOCTYPE html>
<html>
<script src='https://d3js.org/d3.v5.min.js'></script>
<style> rect {fill: lightblue; stroke: black; }</style>
<body>
<svg width=300 height=300>
</svg>
<script src="w8-1-4 Axes.js">
</script>
</body>
</html>

Answer 1

xScale 和 yScale 都是函数。

这就是您在登录 yScale 时看到的内容，以及您可以“像函数一样”使用 xScale 的原因。 d3.scaleLinear() returns 缩放值的函数。在javascript中，函数是对象，对象属性也可以是函数（本例中的方法是设置域和范围等值）。

最简单： d3.scaleLinear() returns 一个函数。

对于 d3 尺度（和大多数 d3 函数），您可以使用 d3.scaleLinear() 创建一个新的尺度函数，然后使用尺度的方法来设置尺度的域或范围等值。该方法 returns 比例本身，因此您可以将多个方法链接在一起，随时修改比例函数。

为什么在使用.attr("height",yScale)时不需要向yScale传递任何参数？

D3 使用 Function.prototype.apply() 将参数传递给提供给 .attr() 的任何函数（或 D3 中的许多其他方法，例如 selection.style() 或 selection.each()）。通过使用 .apply D3“调用具有给定 this 值的函数，并将参数作为数组提供”。 D3中的this值一般是一个单独的元素，第一个参数，规范的d，是与该元素关联的数据，第二个参数，规范的i，是该元素的索引元素，最后一个参数是选择中的元素组。

为选择中的每个元素调用传递给 .attr() 的函数。

缩放函数有一个参数，一个要缩放的值。由于您的数据是一个数字，我们可以将比例函数直接传递给.attr()：传递给它的第一个参数将是数据。

发扬以上，供参考，

.attr("height",xScale)

产生与以下相同的结果：

.attr("height", function(d) {
    return xScale(d);
 })

因为d是一个元素的数据（数据数组中的一个项目），我们可以使用上面的任何一种方法。

D3.js 构建条形图时的问题

Questions when building bar charts by D3.js

javascript

svg

d3.js