Javascript D3图表给出错误，无法读取属性'；长度'；缩放中未定义的属性

我使用的是d3.v4图表。缩放时，我遇到一个错误，无法读取第'grp.select（“.area”）.attr（“d”，area.x（函数（d）{return xt（d）；}））；'行中未定义的属性'length'。在浏览器控制台上，它显示为

**Uncaught TypeError: Cannot read property 'length' of undefined
    at SVGPathElement.t (d3.v4.min.js:2)
    at SVGPathElement.<anonymous> (d3.v4.min.js:2)
    at pt.each (d3.v4.min.js:2)
    at pt.attr (d3.v4.min.js:2)
    at SVGSVGElement.zoomed (pen.js:69)
    at p.apply (d3.v4.min.js:2)
    at N (d3.v4.min.js:2)
    at c.emit (d3.v4.min.js:2)
    at c.zoom (d3.v4.min.js:2)
    at d3.v4.min.js:2**

---

最初，您必须将数据数组绑定到SVG路径才能使其正常工作

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width","2")
  .attr("class", "area")
  .attr("d",area);

var-dataArray=[11,14,27,30,43,47,60,69,77,100]；
var dataMonths=[1,2,3,4,5,6,7,8,9,10]；
VarDataDate=[1,2,3,4,5,6,7,8,9,10]；
var高度=150；
var宽度=1000；
var parseMonth=d3.timeParse（“%m”）；
var area=d3.area（）.x（函数（d，i）{
返回x（数据月数[i]）；
})
.y0（高度）
.y1（功能（d）{
返回y（d）；
});
var svg=d3.选择（“正文”）.追加（“svg”）.attr（“高度”、“100%”）。attr（“宽度”、“100%”）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var grp=svg.append（'g'）.attr（'transform'，'translate（40,0'））.attr（'class'，'charts'）；
//域是指数据，即x轴
//这是y刻度
var y=d3.scaleLinear（）.domain（[0200]）.range（[150,0]）；
var x=d3.scaleTime（）
.domain（[d3.min（数据月，函数（d））{
返回月份（d）；
}),
d3.最大值（数据月数，功能（d）{
返回月份（d）；
})
])
.范围（[0，1000]）；
//这是给亚克斯的
var yAxis=d3.axisLeft（y）、ticks（5）、tickPadding（10）；
var xAxis=d3.axisBottom（x）；
grp.append（'g'）.attr（'class'，'axis y'）.call（yAxis）；
grp.append（'g'）.attr（'class'，'axis x'）.attr（'transform'，'translate（0150））.call（xAxis）；
//用于绘制线
grp.append（“路径”）
.基准（数据阵列）
.attr（“填充”、“无”）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”、“2”）
.attr（“类别”、“区域1”）
.attr（“d”，区域）；
grp.selectAll（“circle.grpcircle”）
.数据（数据阵列）
.enter（）.append（“圆”）
.attr（“类”、“圈”）
.attr（“cx”，函数（d，i）{
返回x（数据月数[i]）；
})
.attr（“cy”，函数（d）{
返回y（d）；
})
.attr（“r”和“4”）
//用于缩放
var zoom=d3.zoom（）
.scaleExtent（[1,32]）
.翻译范围([
[0, 0],
[宽度、高度]
])
.范围([
[0, 0],
[宽度、高度]
])
。打开（“缩放”，缩放）；
var d0=一个月（1）；
风险值d1=一个月（12）；
调用（zoom.transition（））
.持续时间（1500）
.call（zoom.transform，d3.zoomIdentity
.刻度（宽度/（x（d1）-x（d0）））
.translate（-x（d0），0））；
函数缩放（）{
var t=d3.event.transform，
xt=t.rescaleX（x）；
grp.select（“.area 1”）.attr（“d”），area.x（功能（d，i）{
返回xt（parseMonth（dataMonths[i]）；
}));
grp.select（“.x”）.call（xAxis.scale（xt））；
grp.selectAll（“圆圈”）
.attr（“cx”，函数（d，i）{
返回xt（parseMonth（dataMonths[i]）；
});
}

html，
身体{
身高：100%；
}
1.区域1{
剪辑路径：url（#剪辑）；
}

尝试了此解决方案。但是它显示了相同的错误，现在所有的点和路径都不可见。谢谢。这个解决方案对我有效。我想做的另一件事是缩放类“circle”的代码片段中显示的点。怎么做？现在点没有被缩放。唯一的路径正在缩放。请帮忙。我不熟悉D3图表。找到了解决方案。必须使用grp.selectAll（“circle”）.attr（“cx”，函数（d，i）{returnxt（parseMonth（dataMonths[i]）；}）；谢谢，我有点忙。很高兴你自己解决了。

//for plotting lines
grp.append("path")
  .datum(dataArray)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width","2")
  .attr("class", "area")
  .attr("d",area);