javascript - 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:我只绘制“周”变量，因此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等等...

除此之外，当你说...

I've tried to print out the values via console.log and it fits the scale

...这不准确。这些只是数据值，与 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>