Javascript 线图缩放

我想画一个d3线图，但这条线最终是一个非常小的点

我已经尝试了很多不同的方法来缩放，但似乎并没有一种适合我

如果您运行代码段，您会看到blob，我已将其放大（x60），使其可见，但这显然是错误的

函数addLineGraph（数据）{
变量大小={宽度：1100，高度：700，填充：80}
var g=d3.select（document.getElementById（'chart'））
.append（'svg'）
.attr（'width'，size.width+size.padding）
.attr（'height'，size.height+size.padding）
.append（'g'）.attr（'transform'，'translate（+'[size.padding，size.padding]+'））
var x=d3.scaleLinear（[0，size.width]）.domain（d3.extent（数据，d=>d.extent））
变量y=d3.scaleLinear（[size.height，0]）.domain（[23156]）
var line=d3.line（）
.x（d=>x（d））
.y（d=>y（d.c_席位））；
g、 追加（'path'）.datum（data）.attr（'stroke-width'，'1'）.attr（'stroke'，'red'）.style（'transform'，'scale（60'））.attr（'d'，line）；
} 
添加线图([
{
“已预订”：0，
“c_座位”：23
},
{
“预订”：143000，
“c_座位”：34.5
},
{
“预订”：17747436，
“c_座位”：34.5
},
{
“预订”：25724206，
“c_座位”：60
},
{
“预订”：346513093，
“c_座位”：75
},
{
“预订”：347831593，
“c_座位”：91.75
},
{
“预订”：432490753，
“c_座位”：98.75
},
{
“预订”：508046733，
“c_座位”：98.75
},
{
“预订”：524946916，
“c_座位”：112.75
},
{
“预订”：968110526，
“c_座位”：156.25
}
])

---

在D3线性刻度中，您不能这样设置范围：

var x = d3.scaleLinear([0,size.width])
    //don't put the range here--^
    .domain(d3.extent(data,d => d.booked))

您必须明确使用

range

：

var x = d3.scaleLinear()
    .range([0, size.width])
    .domain(d3.extent(data, d => d.booked))

如果没有，则范围将设置为默认值，即[0，1]。这就是为什么你的道路如此之小

我认为发生这种错误是因为您可以按照您的方式在顺序刻度中设置范围：

d3.scaleOrdinal([range])
//range here-------^

因此，在顺序标度（但不是线性标度）中，这：

与以下各项相同：

d3.scaleOrdinal([foo])
    .domain([bar])

这是您修改过的代码：

函数addLineGraph（数据）{
变量大小={
宽度：500，
身高：300，
填充：80
}
变量g=d3。选择（“主体”）
.append（'svg'）
.attr（'width'，size.width+size.padding）
.attr（'height'，size.height+size.padding）
.append（'g'）.attr（'transform'，'translate（+[size.padding，size.padding]+'））
var x=d3.scaleLinear（）.range（[0，size.width]）.domain（d3.extent（数据，d=>d.extent））
var y=d3.scaleLinear（）.range（[size.height，0]）.domain（[23156]）
var line=d3.line（）
.x（d=>x（d））
.y（d=>y（d.c_席位））；
g、 追加（'path'）.datum（data）.attr（'stroke-width'，'1'）.attr（'stroke'，'red'）.attr（'d'，line）；
}
添加线图([{
“已预订”：0，
“c_座位”：23
}, {
“预订”：143000，
“c_座位”：34.5
}, {
“预订”：17747436，
“c_座位”：34.5
}, {
“预订”：25724206，
“c_座位”：60
}, {
“预订”：346513093，
“c_座位”：75
}, {
“预订”：347831593，
“c_座位”：91.75
}, {
“预订”：432490753，
“c_座位”：98.75
}, {
“预订”：508046733，
“c_座位”：98.75
}, {
“预订”：524946916，
“c_座位”：112.75
}, {
“预订”：968110526，
“c_座位”：156.25
}])

路径{
填充：无；
}

d3.scaleOrdinal([foo])
    .domain([bar])