Javascript 如何使用d3.js绘制折线图？

我第一次使用d3.js

所以我提到

但是，在我从ajax获取数据之后，只显示了y轴

以下是JS代码：

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.time.scale()
.range([0, width]);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

var svg = d3.select("#wishingListMsg").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("MYURL", function(error, data) {
if (error) throw error;console.log(data);

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Price ($)");

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);
});

和浏览器返回的JSON数据：

[{"date":"2016-05-03","close":"500"},{"date":"2016-05-04","close":"399"},{"date":"2016-05-11","close":"1"},{"date":"2016-05-13","close":"20"}]

HTML:

<div id="wishingListMsg"></div>

---

如何修改代码？

数据中的日期如下：

2016-05-03 //year-month-day

在示例中：

24-Apr-07 //day-month-year

所以你的约会错了。因此，与此相反：

var parseDate = d3.time.format("%d-%b-%y").parse;
//which is trying to parse : day, abbreviated month name (which you dont have) and year

请改用此解析：

var parseDate = d3.time.format("%Y-%m-%d").parse;
//which will parse : year, month and day (all in integers)

时间解析的文档：

我还添加了以下CSS：

.line{
  fill:none;
  stroke:black;
  stroke-width:2px;
}

如果你删除它，你会发现原因：）基本上，它默认为黑色填充，没有笔划，所以你必须删除填充，只有笔划的路径

更新小提琴：

var数据=[{
“日期”：“2016-05-03”，
“关闭”：“500”
}, {
“日期”：“2016-05-04”，
“关闭”：“399”
}, {
“日期”：“2016-05-11”，
“关闭”：“1”
}, {
“日期”：“2016-05-13”，
“结束”：“20”
}]
var保证金={
前20名，
右:20,，
底数：30，
左：50
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var parseDate=d3.time.format（“%Y-%m-%d”）.parse；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var line=d3.svg.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.close）；
});
var svg=d3.选择（“#wishinglistsg”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
data.forEach（函数（d）{
console.log（'date'，d.date）
d、 日期=解析日期（d.date）；
d、 close=+d.close；
});
x、 域（d3）。范围（数据，函数（d）{
console.log（'d'，d）
返回日期；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.close；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.text（“价格（$）”）；
追加（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（“d”，行）
.line{
填充：无；
笔画：黑色；
笔画宽度：2px；
}
@cindyfish21没问题。控制台日志是您在这里的朋友，只需继续使用它记录出错的事情，然后自己恢复