d3.js x轴日期范围
我的csv文件中有一些值,我显示了一个y轴上有值,x轴上有日期的图表 对于第一个图,我有以下值d3.js x轴日期范围,d3.js,graph,graph-visualization,D3.js,Graph,Graph Visualization,我的csv文件中有一些值,我显示了一个y轴上有值,x轴上有日期的图表 对于第一个图,我有以下值 date,close 13-Jul-16,0.8736701869033555 15-Jul-16,0.3631761567983922 17-Jul-16,0.4795564555162078 19-Jul-16,0.3754827857186281 21-Jul-16,0.4355941951068847 23-Jul-16,0.34393804366457353 25-Jul-16,0.4096
date,close
13-Jul-16,0.8736701869033555
15-Jul-16,0.3631761567983922
17-Jul-16,0.4795564555162078
19-Jul-16,0.3754827857186281
21-Jul-16,0.4355941951068847
23-Jul-16,0.34393804366457353
25-Jul-16,0.40967947088135176
27-Jul-16,0.2707818657230363
29-Jul-16,0.34430251610420176
31-Jul-16,0.28089496856221585
对于第二个图,我有以下值
date,close
11-Jul-16,0.766705419439816
15-Jul-16,0.7353651170975812
17-Jul-16,0.41531502169603063
19-Jul-16,0.5927871032351933
21-Jul-16,0.7986419920511857
23-Jul-16,0.7904979990272231
25-Jul-16,0.817690401573838
27-Jul-16,0.8433545168648027
29-Jul-16,0.8612307965742473
31-Jul-16,0.806498303188971
但在第二个图形中,x轴并不包含所有日期。。作为一个例子,我把输出图的打印屏幕放在这里
这是我的代码,它从csv文件中获取数据并将其可视化
var selectedMonth=document.getElementById('selectedMonth')。值;
var selectedTopic=document.getElementById('selectedTopic')。值
我会尝试使用tickValue显式设置tick值:
刻度(5)将显示5个刻度,但将根据刻度的范围进行调整。除了tickValues(),您可以尝试使用ticks(d3.time.day,2)每隔2天打一次勾。Hi-请分享代码,特别是建立刻度(域和范围)、轴和线功能的部分。另外,两个图表是否使用相同的比例、轴和线函数?@TomShanley谢谢你的兴趣我编辑了我的帖子。我如何在y轴上的特定点上画线,我使用这个,但线存在于图表的顶部,我想指出一些点高于平均值,一些低于平均值,或者我应该找到plateu。我的目标是测量阈值,你知道吗?svg.append(“line”)//附加一个line.style(“stroke”,“red”)//给line.style(“stroke dasharray”(“2,2”)).attr(“x1”,300)//x行第一个端点的位置。attr(“y1”,0.4);//线的第一个端点的y位置
var userFileDirectory="../documents/";
userFileDirectory=userFileDirectory+selectedMonth+"/"+selectedTopic+"/"+"dataCs.csv";
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv(userFileDirectory, function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.text("("+selectedMonth+" "+selectedTopic+")");
});