Javascript 在轴上展开刻度线

我想画一个折线图，然后

• y轴的顶部应有“良好”标签，底部应有“不良”标签 底部
• x轴应具有“1个月、2个月、3个月”

现在的问题是标签没有在x轴的长度上展开。我通过执行

var x=d3.scale.linear（）.domain（[0，arr.length]）.range（[0，width+200]）使x轴记号看起来分散了。

我不想使用200部分，但如果我不使用它，这条线不会穿过整个图形的长度。此外，对于y轴，“好”和“坏”标签位于底部。“好”应该在顶部，“坏”应该在底部

var结果={
“month1”：{“好”：400，“坏”：30}，
“month2”：{“good”：800，“bad”：100}，
“month3”：{“好”：900，“坏”：400}
};
var arr=[]
用于（var输入结果）{
var obj=结果[关键]；
arr.push（obj.good*2-obj.bad*2）
}
控制台日志（arr）
var margin={顶部：30，右侧：20，底部：30，左侧：50}，
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
//var x=d3.scale.linear（）.范围（[0，宽度-30]）
var x=d3.scale.linear（）.domain（[0，arr.length]）.range（[0，width+200]）
变量y=d3.scale.linear（）.domain（[0，Math.max.apply（Math，arr）]）.range（[height，0]）
变量标签=[“1个月”、“2个月”、“3个月]；
var yLabel=[“坏”、“好”]
//var xAxis=d3.svg.axis（）.scale（x）.orient（“bottom”）.tickFormat（函数（d，i）{return tickLabels[i]}）
var xAxis=d3.svg.axis（）.scale（x）.oriented（“bottom”）.ticks（arr.length）.tickFormat（函数（d，i）{
返回标签[i]
})
//var yAxis=d3.svg.axis（）.比例（y）.方向（“左”）.刻度（5）
var yAxis=d3.svg.axis（）.scale（y）.orient（“left”）.tickFormat（函数（d，i）{return yLabel[i]}）
var valueline=d3.svg.line（）
.x（函数（d，i）{返回x（i）}）
.y（函数（d）{返回y（d）}）
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
//域（[0，d3.max（arr，函数（d）{返回d}）]）
//x.domain（[0，2]）
svg.append（“g”）.attr（“class”，“y轴”）.call（yAxis）
svg.append（“g”）.attr（“class”，“x轴”）.call（xAxis）.attr（“transform”，“translate（0）”+“height+”）
svg.append（“path”）.attr（“d”，valueline（arr））.style（{“fill”：“none”，“stroke”：“red”}）.classed（“line”，true）

---

除了绘制直线所用的y轴之外，为序数[好，坏]创建一个新的比例：

var y1 = d3.scale.ordinal()
   .domain(["bad", "good"])
  .rangePoints([height, 0]);

为其定义一个轴：

var yAxis1 = d3.svg.axis().scale(y1).orient("left")

绘制y轴：

svg.append("g").attr("class", "y axis").call(yAxis1)

可以有一个双y轴，如

---

或者不显示绘制直线所基于的轴，除了绘制直线所用的y轴之外，为序数[好，坏]创建一个新比例：

var y1 = d3.scale.ordinal()
   .domain(["bad", "good"])
  .rangePoints([height, 0]);

为其定义一个轴：

var yAxis1 = d3.svg.axis().scale(y1).orient("left")

绘制y轴：

svg.append("g").attr("class", "y axis").call(yAxis1)

可以有一个双y轴，如

---

或者，你没有显示线条所基于的轴，比如说，你能把一个屏幕截图放在图形应该是什么样子（或者你想实现什么）。令人困惑的是，你有像

“month3”这样的记录：{“good”：900，“bad”：400}

既然y轴有好的和坏的，x轴有1个月，2个月等等，那么400和900应该如何出现在图形上呢？对不起，我不清楚，我用图片更新了这个问题，我希望你能更好地理解。该网站将让用户通过点击“好”或“坏”随时投票“按钮，我想在折线图上显示过去三个月的结果。所以

“month3”：{“good”：900，“bad”：400}

的y坐标为500，x坐标为

3mo

obj.good*2-obj.bad*2

可能会让人困惑，我添加了

*2

，因为我正在测试缩放。而不是在y轴上显示间隔。它应该只显示好或坏。让我知道你的问题。好的，y是数据的函数（obj.good*2-obj.bad*2）

{“good”：900，“bad”：400}

它将是900*2-400*2=1000，但你说的是500。如果我错了，你能纠正我吗。忘了

*2

就在那里，我不应该把它放进去。你能把这个图的屏幕截图放下来吗（或者你想实现什么）。令人困惑的是，你有像

“month3”：{“good”：900，“bad”：400}

这样的记录，那么这400和900应该如何出现在图形上呢？因为y轴有好的和坏的，x轴有1个月，2个月等等，对不起，我不清楚，我用图片更新了这个问题，希望你能更好地理解。该网站将有用户通过点击“好”或“坏”按钮进行投票，我想在折线图上显示过去三个月的结果。所以

“month3”：{“good”：900，“bad”：400}

的y坐标为500，x坐标为

3mo

obj.good*2-obj.bad*2

可能会让人困惑，我添加了

*2

，因为我正在测试缩放。而不是在y轴上显示间隔。它应该只显示好或坏。让我知道你的问题。好的，y是数据的函数（obj.good*2-obj.bad*2）

{“good”：900，“bad”：400}

它将是900*2-400*2=1000，但你说的是500。如果我错了，你能纠正我吗。忘了

*2

在那里，我不应该把它放进去。第二个弹夹看起来不错。。明天我得看一下细节。谢谢你的回答。嗨，谢谢你的回答。我只是不喜欢图形没有在整个宽度上展开。通常

.range（[0，width]）

可以完成这项工作，但按照现在的方式，我必须执行

.range（[0，width+200]）

，这看起来也不像是一路蔓延。为什么线条图不清晰