Javascript D3折线图-无法获取要显示的线_Javascript_Json_D3.js

Javascript D3折线图-无法获取要显示的线

javascript json d3.js

Javascript D3折线图-无法获取要显示的线,javascript,json,d3.js,Javascript,Json,D3.js,我一直在构建d3条形图，但我一直无法理解为什么我的折线图不会加载-throws无法读取未定义d3错误的属性“length”，因此我认为这是由于没有正确指向数据，但不确定。我使用的数据是： var data = [ {month: "May", emailsDelivered: 20000, emailsOpened: 10000, emailsClicked: 7900}, {month: "Jun", emailsDelivered: 2800

我一直在构建d3条形图，但我一直无法理解为什么我的折线图不会加载-throws无法读取未定义d3错误的属性“length”，因此我认为这是由于没有正确指向数据，但不确定。我使用的数据是：

   var data = [   
        {month: "May", emailsDelivered: 20000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Jun", emailsDelivered: 28000, emailsOpened: 11000, emailsClicked: 5900},   
        {month: "Jul", emailsDelivered: 30000, emailsOpened: 15000, emailsClicked: 2900},  
        {month: "Aug", emailsDelivered: 40000, emailsOpened: 8000, emailsClicked: 6900},   
        {month: "Sep", emailsDelivered: 30000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Oct", emailsDelivered: 25000, emailsOpened: 10000, emailsClicked: 4900},  
        {month: "Nov", emailsDelivered: 30000, emailsOpened: 9000, emailsClicked: 5900},   
        {month: "Dec", emailsDelivered: 36000, emailsOpened: 2000, emailsClicked: 2900},   
        {month: "Jan", emailsDelivered: 41000, emailsOpened: 5000, emailsClicked: 1900},  
        {month: "Feb", emailsDelivered: 46000, emailsOpened: 7000, emailsClicked: 8900},   
        {month: "Mar", emailsDelivered: 38000, emailsOpened: 16000, emailsClicked: 4900},   
        {month: "Apr", emailsDelivered: 24000, emailsOpened: 10000, emailsClicked: 7900} 
    ]

这是我剩下的代码。这是我第一次在stackoverflow上发帖，如果我的格式不好，我深表歉意

var margin={顶部：20，右侧：80，底部：30，左侧：50}，宽度=960-margin.left-margin.right，高度=500-margin.top-margin.bottom； var xScale=d3.scale.ordinal .rangeRoundBands[0，宽度]，0.2； var yScale=d3.scale.linear .范围[高度，0]； var xAxis=d3.svg.axis .scalexScale .定向底部； var yAxis=d3.svg.axis .鳞片鳞片奥林特夫特先生 var svg=d3.selectemails\u graph.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； xScale.domaindata.mapfunctiond{return d.month；}； yScale.domain[0，d3.maxdata，函数d{return d.emailsDelivered；}]； var line=d3.svg.line .x函数，i{返回xScalei+xScale.rangeBand/2；} .yFunction{return yScaled；}； var lines=svg.selectAllpath.line .数据进来 .appendpath .attrd，linedata.emailsDelivered .阶级，阶层 .没有

.attrshoke，888 有几个问题正在发生

首先，这里是您的代码的一部分。

您的意图是变量数据包含单行的点，但是当您调用.datadata时，d3看到一个包含12个独立对象的数组。您需要调用.data[data]。通过这种方式，d3看到一个具有单个对象的数组，其中在该单个对象中有12个数据点

需要告诉由d3.svg.line创建的线生成器如何从传入的对象检索所需的x和y值。你试图通过

.x函数，i{返回xScalei+xScale.rangeBand/2；}

作为您的x访问器函数。这对d3没有意义，因为您创建了一个序数刻度，它将字符串映射到数字，例如，将“Jan”放入xScale，它返回40。xScale需要您的月份名称，因此

.X函数{return xScaled.month；}

线路生成器：

var line = d3.svg.line()
    .x(function(d) { return (xScale(d.month)); })
    .y(function(d){ return yScale(d.emailsDelivered); });

然后，要调用线生成器，需要传入整个对象

.attr("d", line)

以上是

.attr("d",function(d){
    return line(d)
})

有几个问题正在发生