未生成图表

Question

使用以下代码，我尝试使用 D3.js

从 new.json 绘制数据

<!DOCTYPE html>
<meta charset="utf-8">
<style>
   body { font: 10px sans-serif; }
   .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }
   .x.axis path { display: none; }
   .line { fill: none; stroke: steelblue; stroke-width: 1.5px; }
</style>

请帮助使上面的代码工作谢谢

Answer 1

您的 css 中有 display:none; :

.x.axis path {
  display: none;
}

您的数据设置有误。应该这样设置：

var thisData = [{

    "fit": 28.476,
    "upr": 30.232,
    "lwr": 26.721
  },
  {
    "fit": 28.888,
    "upr": 30.685,
    "lwr": 27.09
  },
  {
    "fit": 29.299,
    "upr": 31.145,
    "lwr": 27.453
  }
];

要编辑此数据，您可以执行以下操作：

var newDataArray = [];
for (var key in oldData) { //go through old data
  //console.log(key)
  if (oldData[key].fit) { //check if it has value, i.e not the id objet
    var thisData = {
      fit: oldData[key].fit,
      upr: oldData[key].upr,
      lwr: oldData[key].lwr,
    }
    newDataArray.push(thisData) //push to new data array
  }
}

然后在你的 D3 函数中使用 newDataArray

您的数据也有这一行：

"_id": ObjectId("56dff08a85e64a6b39381485"),

我已经创建了一个函数来解决这个问题，因为我不确定它的作用：

function ObjectId(id) { //this is just to get round your id in your data
  return id
}

基本上只是 returnObjectID 括号内的字符串。

起初我以为它只是显示一行。但是我手工编辑了数据来检查。

已使用生成的数据更新 fiddle（已编辑）：https://jsfiddle.net/reko91/v211r7ap/5/

主要注意事项如下：

您在 x 域中 returning 1，这会将所有线放在同一条垂直线上，return i 以获得点之间的相等距离：

x.domain(d3.extent(newDataArray, function(d, i) {
  return i;
}));

行也一样：

.x(function(d,i) {
    console.log(d);
    return x(i);
  })

最后编辑 tickFormat():

任一轴上的刻度

.tickFormat(function(d, i){
    return i //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4"
});

最终 fiddle : https://jsfiddle.net/reko91/v211r7ap/7/

未生成图表

chart is not generated

html

javascript

linechart

node.js

d3.js