Javascript d3线不画

我这里有个问题。根据提供的数据，d3.line（）没有显示任何行

我试着通过console.log打印出这些值，它符合比例

我照做了，但修改了它以适应提供给我的数据。我想知道所做的修改是否破坏了代码

谢谢大家!

这是我的密码：

var svg = d3.select("#line-graph"),
margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

var line = d3.line()
   .x(function(d, i) { console.log(i); return i; })
   .y(function(d) { console.log(d); return d; });

d3.json("Data2.json", function(data) {
    x.domain([0, data.length]);
    y.domain(d3.extent(data, function(d1) { return d1.week; }));

    var arrWeek = function(data1) {
    var arr = [];
    for (var i = 0; i < data1.length; i++)
        arr.push(data1[i].week);
    return arr;
    }

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .select(".domain");

    g.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("No. of commits");   

    g.append("path")
        .datum(arrWeek(data))
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line); 
    });

---

编辑3：我只绘制“week”变量，因此x轴的比例为[0，Data2.length]。希望它能消除一些疑问。

您必须在测线生成器中使用刻度：

var line = d3.line()
    .x(function(d, i) {
        return x(i);
    //scale ---^
    })
    .y(function(d) {
        return y(d);
    //scale ---^
    });

这可能不是您的情况，但通常会发生此错误，因为人们会将行生成器中的

x

和

y

误认为标尺名称中的

x

和

y

。这就是为什么为变量和对象指定有意义的名称总是一个好的做法：

xScale

、

yScale

、

xAxis

、

yAxis

等等

除此之外，当你说

我试着通过console.log打印出这些值，它符合比例

。。。这是不准确的。这些只是数据值，与SVG坐标系无关（除非使用标尺）

这是您的工作代码：

var svg=d3.选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
风险值数据=[
{
“天”：[
0,
0,
0,
0,
0,
1.
0
],
“总数”：1，
“一周”：1457827200
},
{
“天”：[
0,
0,
0,
1.
0,
3.
1.
],
“总数”：5，
“一周”：1458432000
}
];
var x=d3.scaleLinear（）.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）.rangeRound（[height，0]）；
var line=d3.line（）
.x（函数（d，i）{返回x（i）；}）
.y（函数（d）{返回y（d）；}）；
x、 域（[0，data.length]）；
y、 域（d3.extent（数据，函数（d1）{returnd1.week；}））；
var arrWeek=函数（数据1）{
var-arr=[]；
对于（变量i=0；i

您现在向我们展示了数据（
Data2.json
）……而且您没有说明您使用的是哪一个D3版本。。。。你的问题是规模问题。我没有把这个问题作为一个重复的问题来结束，因为这看起来很粗鲁，因为你把我要提到的问题链接到结束这个问题上，说它没有解决你的问题。但它确实解决了这个问题
var line = d3.line()
    .x(function(d, i) {
        return x(i);
    //scale ---^
    })
    .y(function(d) {
        return y(d);
    //scale ---^
    });