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
}

基本上只返回ObjectID的bracks中的字符串。

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

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

需要注意的主要内容如下：

您在x域中返回1，这会将所有行放在同一垂直线上，返回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"
});

最后的小提琴：https://jsfiddle.net/reko91/v211r7ap/7/

图表未生成

1 个答案: