Javascript 用正数和正数绘制折线图；负值

我试图画一个鸽派和鹰派的折线图

例如：

然而，它抛出了一个错误

我从一个条形图中选取了这个例子，它用一个正值和负值绘制条形图。然后我只使用了与绘制

xScale/yScale

和

xAxis/yAxis

相关的代码

---

jsFIDLE可以找到

这里的问题是，您使用的是x轴的顺序刻度：

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))

其中包含此域：

[0, 1, 2, 3, 4, 5, 6, 7]

但是，您正在将基准传递给直线生成器：

var line = d3.svg.line()
    .x(function(d) { return x(d);})
    //datum here -------------^

相反，传递基准的索引：

var line = d3.svg.line()
    .x(function(d, i) { return x(i);})
    //index here ----------------^

以下是您的更新代码：

var数据=[-0.1，-0.5，-0.32,0.2,1,0.5，-0.3，-1.0]；
var保证金={
前30名，
右:10,，
底部：10，
左：30
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var y0=Math.max（Math.abs（d3.min（数据）），Math.abs（d3.max（数据））；
变量y=d3.scale.linear（）
.domain（[-y0，y0]）
.范围（[高度，0]）
.nice（）；
var x=d3.scale.ordinal（）
.域（d3.范围（数据.长度））
.rangeRoundBands（[0，宽度]，.2）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var line=d3.svg.line（）
.x（功能（d，i）{
返回x（i）；
})
.y（功能（d）{
返回y（d）；
});
var dataSum=d3.sum（数据，函数（d）{
返回d；
});
svg.append（“g”）
.attr（“类”、“x轴”）
.呼叫（yAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.附加（“行”）
.attr（“y1”，y（0））
.attr（“y2”，y（0））
.attr（“x1”，0）
.attr（“x2”，宽度）；
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，行）
.axis文本{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔画：蓝色；
笔画宽度：2px；
}
.勾选文本{
字体大小：12px；
}
.勾线{
不透明度：0.2；
}
谢谢！！在这件事上我的头都挖出来了。但是我想知道我是否应该使用n个替代方案，而不是
序数标度
，这会是一个重大变化吗？这取决于你的x变量是什么。我看到你是StackOverflow的新手，并且你不久前发布了同样的问题。请，因为这一个有答案，删除另一个。