Javascript 折线图中的路径太小

我目前正在使用d3.js创建一个折线图，并且面临着路径正确宽度和高度的问题

const margin={
前50名，
右:50,，
底数：50，
左：50
}
常数宽度=700
常数高度=500
const dateConv=d3.timeParse（“%Y-%m-%d”）
const svg=d3.select（#temparatureGraph”）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）
d3.xml（“https://raw.githubusercontent.com/ForceSergeant/D3LineGraph/6aa5b375dbc0bd2ca86f6fcef73369caae64232e/data.xml")
。然后（（xml）=>{
让值=[]
让日期=[]
让时间=[]
//处理数据
const document=d3.select（xml.documentElement）
常数温度=文件。选择全部（'temperature'）
温度。选择全部（“平均”）。每个（函数（）{
value.push（+this.textContent）
})
const date=document.selectAll（'utc'）
日期。选择全部（“日期”）。每个（函数（）{
dates.push（dateConv（this.textContent））
})
常量时间=文档。选择全部（'utc'）
时间。选择全部（“时间”）。每个（函数（）{
times.push（this.textContent）
})
console.log（日期）
console.log（次）
日期=日期。映射（（值、索引）=>{
value.setHours（乘以[index].split（“：”[0]）
返回值
})
常量数据=[]
对于（变量i=0；id.date））
域（[d3.min（数据，d=>d.value），d3.max（数据，d=>d.value）]）
const xaxis=d3.axisBottom（）
.滴答声（d3.时间月。每（1）次）
.tickFormat（d3.timeFormat（“%b%y”））
.比例（xScale）；
常数yaxis=d3.axisLeft（）.scale（yScale）；
//x-乙酰胆碱酯酶
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xaxis）；
//y-乙酰胆碱酯酶
svg.append（“g”）
.attr（“类”、“轴”）
.呼叫（yaxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“dy”，“.75em”）
.attr（“y”，6）
.style（“文本锚定”、“结束”）
.文本（“摄氏度”）；
常量行=d3.line（）
.x（功能（d）{
返回xScale（d.日期）；
})
.y（功能（d）{
返回Y刻度（d值）；
});
追加（“路径”）
.基准（数据）
.attr（“类”、“数据路径”）
.attr（“d”，行）
})

。轴线{
笔画：红色；
}
/*轴线轮廓*/
.轴路径{
笔画：绿色；
}
/*轴文本*/
.轴文本{
填充：蓝色；
}
.数据路径{
填充：无；
笔画：金色；
行程限制：1；
}

---

您的示例中缺少一些数据，具体来说，在2018年1月31日，

值为NaN


在d3中，您需要设置折线图可以跳过的值，否则它会尝试绘制这些值、打断这些值，并且（毫无帮助地）在没有警告的情况下退出。您可以使用，这是我在下面（放大）的示例中所做的。请注意，该行如何停止存在并稍后重新启动


const margin={
前50名，
右:50,，
底数：50，
左：50
}
常数宽度=700
常数高度=500
const dateConv=d3.timeParse（“%Y-%m-%d”）
const svg=d3.select（#temparatureGraph”）.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）
d3.xml（“https://raw.githubusercontent.com/ForceSergeant/D3LineGraph/6aa5b375dbc0bd2ca86f6fcef73369caae64232e/data.xml")
。然后（（xml）=>{
让值=[]
让日期=[]
让时间=[]
//处理数据
const document=d3.select（xml.documentElement）
常数温度=文件。选择全部（'temperature'）
温度。选择全部（“平均”）。每个（函数（）{
value.push（+this.textContent）
})
const date=document.selectAll（'utc'）
日期。选择全部（“日期”）。每个（函数（）{
dates.push（dateConv（this.textContent））
})
常量时间=文档。选择全部（'utc'）
时间。选择全部（“时间”）。每个（函数（）{
times.push（this.textContent）
})
dates.forEach（（值、索引）=>{
value.setHours（乘以[index].split（“：”[0]）
})
常量数据=[]
//为了简单起见，我添加了这个，
//这与解决方案无关
对于（变量i=700；i<750；i++）{
数据推送({
日期：日期[i]，
价值：价值[i]
})
}
常量xScale=d3.scaleTime（）.range（[0，宽度]）
常量yScale=d3.scaleLinear（）.range（[height，0]）
域（d3.extent（数据，d=>d.date））
域（[d3.min（数据，d=>d.value），d3.max（数据，d=>d.value）]；
const xaxis=d3.axisBottom（）
.滴答声（d3.时间月。每（1）次）
.tickFormat（d3.timeFormat（“%b%y”））
.比例（xScale）；
常数yaxis=d3.axisLeft（）.scale（yScale）；
//x-乙酰胆碱酯酶
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xaxis）；
//y-乙酰胆碱酯酶
svg.append（“g”）
.attr（“类”、“轴”）
.呼叫（yaxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“dy”，“.75em”）
.attr（“y”，6）
.style（“文本锚定”、“结束”）
.文本（“摄氏度”）；
常量行=d3.line（）
.defined（函数（d）{return！isNaN（d.value）；}）
.x（功能（d）{
返回xScale（d.日期）；
})
.y（功能（d）{
返回Y刻度（d值）；
});
追加（“路径”）
.基准（数据）
.attr（“类”、“数据路径”）
.attr（“d”，行）
})
。轴线{
笔画：红色；
}
/*轴线轮廓*/
.轴路径{
笔画：绿色；
}
/*轴文本*/
.轴文本{