Javascript 线图的x坐标缩放

我想知道如何使x坐标从0开始

    var valueline = d3.svg.line()
        .x(function(d, i){
            console.log(x(d)); //outputs 280.14285714285717 , 530, 378.57142857142856
            return x(d)
        })
        .y(function(d){
            return y(d)
        })

您可以在注释中看到，控制台输出280.14285714285717的第一个输出没有输出0

这是我的x变量

var x=d3.scale.linear（）.domain（[0，d3.max（d3.values（arr））））.range（[0，width]）

我是d3新手，但我认为这会将我从0开始的所有输入都转换为

arr

数组的最大el，并将其从0缩放到我在下面可以看到的变量中指定的svg的宽度。我想

console.log（x（370））

将输出到

280.14285714285717

是有道理的，但是如何将其设置为0以使线从y轴开始？这里有一些必要的变量

var margin = {
        top : 30,
        right : 20,
        bottom : 30,
        left : 50
    },
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
 var arr =  [370, 700, 500];

我将向您展示我正在处理的提示此问题的完整代码，但让我告诉您结果的错误。线条图不是从左侧（y轴）开始的，我在使线条和x记号沿图形宽度展开时遇到问题。我将非常感谢你在这方面的帮助

var结果={
“月1”：{
“好”：400，
“坏”：30
},
“月2”：{
“好”：800，
“坏”：100
}，“月3”：{
“好”：900，
“坏”：400
}
};
var xLabels=d3.键（结果）；
变量yLabels=[“坏”、“好”]；
var arr=[]
用于（var输入结果）{
var obj=结果[关键]；
arr.push（obj.good-obj.bad）；
}
var保证金={
前30名，
右:20,，
底数：30，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-margin.top-margin.bottom；
变量y1=d3.scale.ordinal（）
.domain（[“坏”、“好”]）
.范围点（[高度，0]）
控制台日志（arr）
var x=d3.scale.linear（）.domain（[0，d3.max（d3.values（arr））））.range（[0，width]）；
变量y=d3.scale.linear（）.domain（[0，d3.max（arr，函数（a））{
返回a；
})]).范围（[高度，0]）
var xAxis=d3.svg.axis（）.scale（x）.oriented（“bottom”）.ticks（arr.length）.tickFormat（函数（d，i）{
返回xLabels[i]
});
var yAxis1=d3.svg.axis（）.scale（y1.orient（“左”）
控制台日志（x（370））
var valueline=d3.svg.line（）
.x（功能（d，i）{
console.log（x（d））；//输出280.14285714285717530378.57142857142856
返回x（d）
})
.y（功能（d）{
返回y（d）
})
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
svg.append（“g”）.attr（“class”，“x轴”）.call（xAxis）.attr（“transform”，“translate（0）”+“height+”）
svg.append（“g”）.attr（“class”，“y轴”）.call（yAxis1）
svg.append（“path”）.attr（“d”，valueline（arr））.style({
“填充”：“无”，
“笔划”：“红色”
}).classed（“行”，真）

---

您的输入域从0到700，输出范围从0到530。所以0会被映射到0，而380会被映射到~280。如果希望将最小值（380）映射为0，则应将380设置为输入域的开始，或者更一般地，在输入数组发生更改时执行此操作：

var x = d3.scale.linear()
    .domain([d3.min(arr), d3.max(arr)])
    .range([0, width])
;

---

关联数组只需要d3.values。

输入域从0-700，输出范围从0-530。所以0会被映射到0，而380会被映射到~280。如果希望将最小值（380）映射为0，则应将380设置为输入域的开始，或者更一般地，在输入数组发生更改时执行此操作：

var x = d3.scale.linear()
    .domain([d3.min(arr), d3.max(arr)])
    .range([0, width])
;

---

关联数组只需要d3.values。

另外，如果上面的输出是直线图的x坐标，为什么会出现顺序问题呢？不应该在图形的宽度上从小到大，所以我很困惑，如果上面的输出是直线图的x坐标，为什么它们会出问题？不应该在图形的宽度上从小变大这很有帮助，但我仍然需要帮助完成我的最终要求，即使线图在图形的整个宽度上缩放，并使记号标记在整个x轴上缩放。现在这一行似乎正在上升，但这不是输入所显示的：`[370700500]`。它应该上升，然后再上升，然后再下降一点。我一整天都在试着这么做。x轴部分我不明白，如果500是你的x值，它应该在700之前绘制。除非这些是你的y值，在这种情况下你需要给它们合适的x值。我也不明白。我在路径行中看到了这一点。行从0到530再到208。在我提出你的建议之后。没错：370被映射到0，700被映射到530，500被映射到208。这些是映射后的新x值。对于y轴，您以相反的方式进行映射：您指定的输入域从0到700，输出范围从height=210到0。因此370将被映射到99700到0，500到60，这就是你看到的路径。你使用相同的数组来创建x和y，但是你在不同的方向上映射它们。我想我理解你的意思。我只想再次告诉你我想要什么。我完成得越快，我就越快结束这个问题。如果你想帮助我，那就太好了。我只想要一个在顶部有y轴记号标签“good”和底部有“bad”的线图。x轴刻度应展开，表示“1mo”“2mo”“3mo”。折线图应该表示3个月内点击“好”或“坏”的人数。因此，如果第1个月有200个单击“好”，50个单击“坏”。1个月应该在图表上缩放150。如果你不想做，我理解。这是我的问题。这是有帮助的，但我仍然需要帮助我的最终要求，这