D3.js D3JS制作日期副本
我有这个d3js代码:D3.js D3JS制作日期副本,d3.js,D3.js,我有这个d3js代码: var tooltip = tooltipd3(); var svg = d3.select("svg#svg-day"), margin = { top: 20, right: 30, bottom: 30, left: 25, padding: 15
var tooltip = tooltipd3();
var svg = d3.select("svg#svg-day"),
margin = {
top: 20,
right: 30,
bottom: 30,
left: 25,
padding: 15
},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// parse the periodo / time
var parseTime = d3.timeParse("%Y-%m-%d");
// set the ranges
var x = d3.scaleTime().range([0, width - margin.padding]);
var y = d3.scaleLinear().range([height, 0]);
// define the area
var area = d3.area()
.x(function(d) {
return x(d.periodo) + (margin.left + margin.padding);
})
.y0(height)
.y1(function(d) {
return y(d.guadagno);
});
// define the line
var valueline = d3.line()
.x(function(d) {
return x(d.periodo) + (margin.left + margin.padding);
})
.y(function(d) {
return y(d.guadagno);
});
var div = d3.select("svg#svg-day")
.append("div") // declare the tooltip div
.attr("class", "tooltip") // apply the 'tooltip' class
.style("opacity", 0);
// get the data
d3.csv(base_url() + 'graph/getStatementsDaily/', function(error, data) {
if (error) throw error;
$('.graph-loading').hide();
// format the data
data.forEach(function(d) {
d.periodo = parseTime(d.periodo)
d.guadagno = +d.guadagno;
});
// scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.periodo;
}));
y.domain([0, d3.max(data, function(d) {
return d.guadagno + ((d.guadagno / 100) * 10); // 10% in più sulla scala numerica
})]);
// add the area
svg.append("path")
.data([data])
.attr("class", "area")
.attr("d", area);
// add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3)
.attr("cx", function(d) {
return x(d.periodo) + (margin.left + margin.padding);
})
.attr("cy", function(d) {
return y(d.guadagno);
})
.on('mouseover', function(d) {
var html = '<h5>' + d.guadagno + ' €</h5>';
tooltip.mouseover(html); // pass html content
})
.on('mousemove', tooltip.mousemove)
.on('mouseout', tooltip.mouseout);
// add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + (margin.left + margin.padding) + "," + (height) + ")")
//HERE IS THE DATES CODE
.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%d/%m")))
// add the Y Axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate (" + (margin.left + margin.padding) + " 0)")
.call(d3.axisLeft(y));
});
结果很好,有很多日期,但有7个日期,我得到了重复的结果,如您在这里看到的:
这是为什么??我该如何修复它呢?这是困扰许多D3新手的问题:轴上的刻度,特别是使用时间刻度时,会自动生成。在您的例子中,给定域中的日期间隔,它恰好为每天创建两个刻度。但请注意:这些记号表示同一天不同的时间(小时)(如果在axis generator中删除
tickFormat
)
让我们看看生成x轴的代码:
var svg=d3.选择(“svg”);
var data=d3.csvParse(d3.select(“#csv”).text();
var parseTime=d3.timeParse(“%Y-%m-%d”);
data.forEach(函数(d){
d、 periodo=解析时间(d.periodo)
});
var x=d3.scaleTime()
.范围([20480])
.域(d3.范围(数据、函数(d)){
返回d.periodo;
}));
var axis=d3.axisBottom(x).tickFormat(d3.timeFormat(“%d/%m”))(svg.append(“g”).attr(“transform”,“translate(0,50)”))代码>
pre{
显示:无;
}
瓜达格诺周期
2017-05-08,0.0
2017-05-09,0.5385
2017-05-10,0.0
2017-05-11,0.0
2017-05-12,0.0
2017-05-13,0.5680
2017-05-14,0.0
2017-05-15,0.0
有哪些重复项?我看到的结果正是你的CSV上的内容。@GerardoFurtado,不,看看日期。数值很好,日期是双倍的,这不是重复的。这是时间刻度的正常行为。但为什么它显示两次而不是一次?(另一个也一样)谁会想要这个?我不^_^我可以帮助你,但有一个条件:请将csv图像更改为真实文本。我不会打那个的。
periodo,guadagno
2017-05-08,0.0
2017-05-09,0.5385
2017-05-10,0.0
2017-05-11,0.0
2017-05-12,0.0
2017-05-13,0.5680
2017-05-14,0.0
2017-05-15,0.0