d3线不画

Question

我在这里遇到了问题。 d3.line（）未根据提供的数据显示任何行。

我尝试通过console.log打印出值，它符合规模。 I've checked this link about the scaling issue.

我跟着this page，但修改了它以适应给我的数据。我想知道修改是否破坏了代码。

谢谢！

这是我的代码：

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); 
    });

编辑：图表只显示数值比例而没有为数据绘制任何线条。

编辑2：道歉。我正在使用d3.v4.min.js.对于Data2.json，这里有2个元素，因为它很长：

[
 {
"days": [
  0,
  0,
  0,
  0,
  0,
  1,
  0
],
"total": 1,
"week": 1457827200
},
{
"days": [
  0,
  0,
  0,
  1,
  0,
  3,
  1
],
"total": 5,
"week": 1458432000
}
]

编辑3：我只画了＆＃34;周＆＃34;变量，因此x轴的比例为[0，Data2.length]。希望它能够解决一些疑问。

Answer 1

您必须在线路生成器中使用您的比例：

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.select("svg"),
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 data = [
 {
"days": [
  0,
  0,
  0,
  0,
  0,
  1,
  0
],
"total": 1,
"week": 1457827200
},
{
"days": [
  0,
  0,
  0,
  1,
  0,
  3,
  1
],
"total": 5,
"week": 1458432000
}
];

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

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


    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); 

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="500"></svg>