Javascript 基于窗口大小的D3比例

我是D3v3新手，正在学习一些关于基本线性和顺序音阶的教程。我正在修改教程中的一段代码。我想根据窗口的大小显示和缩放颜色。如果有更多的数据，则应再次均匀分配空间以适合所有数据

var数据=[0,1,2,3,4,5,6,7,8]；
var colorScale=d3.scale.category10（）；
var padding=2，dataLength=data.length；
var Xscale=d3.scale.linear（）
.domain（[data.min，data.max]）
.range（[0，window.innerWidth]）；
var svg=d3.选择（“主体”）
.append（“svg”）
艾特先生({
“宽度”：window.innerWidth，
“高度”：window.innerHeight
});
var rects=svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）；
矩形属性({
“fill”：函数（d）{返回颜色刻度（d）；}，
“x”：函数（d，i）{返回Xscale（d）；}，
“宽度”：window.innerWidth/dataLength-填充，
“高度”：50
})

---

max

和

min

不是数据的属性，数据只是一个平面数组。因此，没有

data.max

或

data.min

，您的

Xscale

域现在是：

[Nan, Nan]

当然，你和南斯是不会有任何进展的

相反，您需要的是：

.domain([d3.min(data), d3.max(data)])

以下是您的更新代码：

var数据=[0,1,2,3,4,5,6,7,8]；
var colorScale=d3.scale.category10（）；
var padding=2，
dataLength=data.length；
var Xscale=d3.scale.linear（）
.domain（[d3.min（数据），d3.max（数据）]）
.range（[0，window.innerWidth]）；
var svg=d3.选择（“主体”）
.append（“svg”）
艾特先生({
“宽度”：window.innerWidth，
“高度”：window.innerHeight
});
var rects=svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）；
矩形属性({
“填充”：功能（d）{
返回色标（d）；
},
“x”：功能（d，i）{
返回Xscale（d）；
},
“宽度”：window.innerWidth/dataLength-填充，
“高度”：50
})

---

我能提出建设性的批评吗

Xscale

在JavaScript中是一个奇怪的名称，通常是

Xscale

。在JS中，我们通常以小写字母开头，并用大写字母表示另一个“单词”。例如

someValue

，

interestingExample

，

certainFunction

等。。。当然，你可以随意命名它们！感谢您的反馈，并告诉我在JS中声明变量的常规方法。