Javascript d3 v4折线图数据

我想将这个折线图示例用于我的新格式数据

旧数据格式和x轴：

  const DATA1 = [9.5, 2, 5, 7, 5, 3, 0];
  const LABELS = [
    'monday',
    'tuesday',
    'wednesday',
    'thursday',
    'friday',
    'saturday',
    'sunday'
  ];

新数据格式：：

  // parse the date / time
  const parseDate = d3.timeParse('%Y%m%d')
  const formatTime = d3.timeFormat('%y/%m/%d')

  const data = [
    {dataX: '20171016', dataY: 54.13},
    {dataX: '20171017', dataY: 50.13},
    {dataX: '20171018', dataY: 70.13},
    {dataX: '20171019', dataY: 53.98}]
  data.map(d => {
    d.dataX = parseDate(d.dataX)
    d.dataY = +d.dataY
  })

---

但是我仍然面临新格式的一些问题。

您需要将刻度从

缩放带更改为
时间刻度
，然后根据新数据集进行更改


const graphContainer=d3.选择（“.d3--line”）；
const svg=d3.选择（“svg”）；
常量边距={top:50，right:50，bottom:50，left:50}；
常数持续时间=500；
让宽度，高度，内部宽度，内部高度；
让xScale，yScale；
const parseDate=d3.timeParse（“%Y%m%d”）；
常量formatTime=d3.timeFormat（“%y/%m/%d”）；
常数数据=[
{dataX:“20171016”，dataY:54.13}，
{dataX:“20171017”，dataY:50.13}，
{dataX:“20171018”，dataY:70.13}，
{dataX:“20171019”，dataY:53.98}
];
data.map（d=>{
d、 dataX=解析日期（d.dataX）；
d、 dataY=+d.dataY；
});
（函数init（）{
getDimensions（）；
getScaleDomains（）；
getScaleRanges（）；
渲染图（数据）；
})();
d3.选择（窗口）。打开（“调整大小”，调整大小）；
函数resize（）{
破坏图（）；
getDimensions（）；
getScaleRanges（）；
渲染图（数据）；
}
函数渲染图（数据）{
常数线=d3
.第（）行
.x（（d，i）=>xScale（d.dataX））
.y（d=>yScale（d.dataY））
.曲线（d3.曲线A（0.5））；
常数面积=d3
1.区域（）
.x（（d，i）=>xScale（d.dataX））
.y0（内部高度）
.y1（d=>yScale（d.dataY））
.曲线（d3.曲线A（0.5））；
constxaxis=d3.axisBottom（xScale）.tickFormat（（d，i）=>formatTime（d））.ticks（4）；
常数yAxis=d3.axisLeft（yScale）.ticks（4）；
attr（“宽度”，宽度）.attr（“高度”，高度）；
const-inner=svg.selectAll（“g.inner”）.data（[null]）；
inner.exit（）.remove（）；
内部的
.输入（）
.附加（“g”）
.attr（“类”、“内部”）
.attr（“transform”，`translate（${margin.top}，${margin.right}）`）；
常量水平线组=svg
.选择全部（“g.inner”）
.selectAll（“行组”）
.数据（[null]）；
horizontalLineGroup.exit（）.remove（）；
水平线性群
.输入（）
.附加（“g”）
.attr（“类别”、“行组”）；
常量水平线=svg
.选择全部（“g.line-group”）
.selectAll（“网格线”）
.数据（yScale.ticks（4））；
horizontalLine.exit（）.remove（）；
水平线
.输入（）
.附加（“行”）
.attr（“类”、“网格线”）
.attr（“x1”，0）
.attr（“x2”，内部宽度）
.attr（“y1”，d=>yScale（d））
.attr（“y2”，d=>yScale（d））；
常量xa=svg
.选择全部（“g.inner”）
.选择全部（“g.x.axis”）
.数据（[null]）；
xa.exit（）.remove（）；
xa
.输入（）
.附加（“g”）
.attr（“类”、“x轴”）
.attr（“transform”，`translate（0，${innerHeight}）`）
.呼叫（xAxis）；
const ya=svg
.选择全部（“g.inner”）
.选择全部（“g.y.轴”）
.数据（[null]）；
ya.exit（）.remove（）；
嗯
.输入（）
.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
常量pathLine1=svg
.选择全部（“g.inner”）
.selectAll（“.path-line1”）
.数据（[null]）；
pathLine1.exit（）.remove（）；
路线1
.输入（）
.append（“路径”）
.attr（“类”、“路径行path-line1”）
.attr（“d”，（）=>行（createZeroDataArray（数据）））
.transition（）
.持续时间（持续时间）
.ease（d3.easePoly.指数（2））
.attr（“d”，行（数据））；
const pathArea1=svg
.选择全部（“g.inner”）
.selectAll（“.path-area1”）
.数据（[null]）；
路径区域1.exit（）.remove（）；
路径区域1
.输入（）
.append（“路径”）
.attr（“类”、“路径区域path-area 1”）
.attr（“d”，（）=>区域（createZeroDataArray（数据）））
.transition（）
.持续时间（持续时间）
.ease（d3.easePoly.指数（2））
.attr（“d”，区域（数据））；
}
函数图（）{
svg.selectAll（“*”）.remove（）；
}
函数getDimensions（）{
宽度=graphContainer.node（）.clientWidth；
高度=500；
innerWidth=宽度-边距.left-边距.right；
innerHeight=高度-margin.top-margin.bottom；
}
函数getScalerAges（）{
xScale.range（[0，innerWidth]）；
yScale.range（[innerHeight，0]）.nice（）；
}
函数getScaleDomains（）{
xScale=d3.scaleTime（）.domain（d3.extent（data，a=>a.dataX））；
yScale=d3.scaleLinear（）.domain（[0，d3.max（data，a=>a.dataY）]）；
}
函数createZeroDataArray（arr）{
常数newArr=[]；
arr.forEach（（项，索引）=>（newArr[index]={dataX:new Date（），dataY:0}））；
返回newArr；
}
console.log（“refresh”）
.d3{
盒影：0 1px#eee；
框大小：边框框；
}
路径
线{
填充：无；
形状渲染：边缘清晰；
冲程：#E8E8E8；
}
.路线{
形状渲染：初始；
}
.path-line.path-line 1{
行程：0baadd；
}
.path-line.path-line 2{
行程：#47cf73；
}
.径区{
中风：无；
}
.path-area.path-area1{
填充物：rgba（111702210.7）；
行程：rgba（111702210.7）；
}
.path-area.path-area2{
填充：rgba（71207115,0.55）；
中风：rgba（71207115,0.55）；
}
.勾选文本{
字体系列：无衬线；
字体大小：10px；
填写：#999；
}
您必须使用d3.scaleTime作为x轴：
然后，将属性与数据值绑定时，必须使用：

xScale(d.dataX)

而不是：

xScale(LABELS[i])

y值使用相同

d => yScale(d.dataY)

而不是

d => yScale(d)

为什么要更改动画@？动画非常特定于早期的数据集（它没有日期，因此设置为0）。我已将其更改为当前日期，以便动画从右向左运行。您可以根据自己的选择进行更改。