Javascript D3.js折线图-Can'；不要让x轴出现
我正跟着迈克。示例中的时间格式为（“%d-%b-%y”），但使用我自己的数据只使用年份。（我想）我已经做了所有必要的改变。y轴显示，但x轴不显示。也没有错误显示，所以我不知道去哪里。下面是我的代码。谢谢Javascript D3.js折线图-Can'；不要让x轴出现,javascript,d3.js,linechart,Javascript,D3.js,Linechart,我正跟着迈克。示例中的时间格式为（“%d-%b-%y”），但使用我自己的数据只使用年份。（我想）我已经做了所有必要的改变。y轴显示，但x轴不显示。也没有错误显示，所以我不知道去哪里。下面是我的代码。谢谢 <!DOCTYPE html> <meta charset="utf-8"> <p></p> <style> .axis--x path { display: none; } .line { fill: none;
<!DOCTYPE html>
<meta charset="utf-8">
<p></p>
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<!--We immediately define the variables of our svg/chart-->
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// Now we give our svg some attributes. We use conventional margins as set out by Mike Bostock himself.
// Sets width and height minus the margins.
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 + ")");
// Here we set out the time format: date-month-year.
//var parseTime = d3.timeParse("%d-%b-%y");
var formatTime = d3.timeFormat("%Y");
formatTime(new Date); // "2015"
// Now we set our axis. X is according to the time, and y is linear.
// We use rangeRound to round all the values to the nearest whole number.
// We don't use rangeBands or rangePoints as we're not creating a bar chart or scatter plot.
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
// Now we tell what we want our line to do/represent.
// x is the date, and y is the close price.
var line = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// This is where we load our tsv file.
d3.tsv("/LineCharts/Line Chart 2 - MO Capital Punishment/data/data.tsv", function(d) {
d.date = formatTime(d.date);
d.close = +d.close;
return d;
}, function(error, data) {
if (error) throw error;
// The .extent function returns the minimum and maximum value in the given array.
// Then, function(d) { return d.date; } returns all the 'date' values in 'data'.
// The .domain function which returns those maximum and minimum values to D3 as the range for the x axis.
x.domain(d3.extent(data, function(d) {
return d.date;
}));
//Same as above for the x domain.
y.domain(d3.extent(data, function(d) {
return d.close;
}));
// Note that we use attr() to apply transform as an attribute of g.
// SVG transforms are quite powerful, and can accept several different kinds of transform definitions, including scales and rotations.
// But we are keeping it simple here with only a translation transform, which simply pushes the whole g group over and down by some amount, each time a new value is loaded onto the page.
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Doing the same as above but for the y axis.
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
//This is where we append(add) text labels to our y axis.
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Total");
g.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
.轴--x路径{
显示：无；
}
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
//现在我们给svg一些属性。我们使用迈克·博斯托克自己提出的传统利润率。
//设置宽度和高度减去边距。
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
//这里我们列出了时间格式：日期-月-年。
//var parseTime=d3.timeParse（“%d-%b-%y”）；
var formatTime=d3.timeFormat（“%Y”）；
格式时间（新日期）；//"2015"
//现在我们设定轴心。X表示时间，y表示线性。
//我们使用rangeRound将所有值四舍五入到最接近的整数。
//我们不使用范围带或范围点，因为我们不创建条形图或散点图。
var x=d3.scaleTime（）
.rangeRound（[0，宽度]）；
变量y=d3.scaleLinear（）
.rangeRound（[高度，0]）；
//现在，我们告诉您我们希望我们的产品线做什么/代表什么。
//x是日期，y是收盘价。
var line=d3.line（）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d.close）；
});
//这是我们加载tsv文件的地方。
d3.tsv（“/LineCharts/linechart 2-MO死刑/data/data.tsv”，函数（d）{
d、 日期=格式时间（d.日期）；
d、 close=+d.close；
返回d；
}，函数（错误，数据）{
如果（错误）抛出错误；
//.extent函数返回给定数组中的最小值和最大值。
//然后，函数（d）{return d.date；}返回“data”中的所有“date”值。
//.domain函数，它将这些最大值和最小值作为x轴的范围返回给D3。
x、 域（d3）。范围（数据，函数（d）{
返回日期；
}));
//与上述x域相同。
y、 域（d3）。范围（数据，函数（d）{
返回d.close；
}));
//注意，我们使用attr（）将transform作为g的属性应用。
//SVG转换功能非常强大，可以接受多种不同类型的转换定义，包括缩放和旋转。
//但是我们在这里保持简单，只有一个翻译转换，每次在页面上加载一个新值时，它只是将整个g组上下推一点。
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//执行与上述相同的操作，但y轴除外。
g、 附加（“g”）
.attr（“类”、“轴--y”）
.呼叫（d3.左（y））
//这是我们在y轴上附加（添加）文本标签的地方。
.append（“文本”）
.attr（“填充”、“千”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“0.71em”）
.style（“文本锚定”、“结束”）
.文本（“总计”）；
g、 附加（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（“d”，行）；
});
d3.select（“path.line”）d3.select（“path.line”）.empty（）