在x轴和带时间刻度的直线之间添加空格
Add space between x-axis and line with time scale
我使用的是下面的一个示例。
HTML-
<div id="chart-holder"></div>
CSS-
.chart-holder {
position: relative;
font-family: Helvetica, sans-serif;
}
.chart-tip {
display: none;
position: absolute;
min-width: 70px;
top: 0px;
left: 0px;
padding: 3px 5px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: .8em;
text-shadow: none;
text-align: center;
z-index: 10500;
border-radius: 3px;
}
.v {
display: block;
font-size: 1.2em;
}
path {
stroke: #0da9c0;
stroke-width: 2;
fill: none;
}
path.domain {
stroke: #aaa;
stroke-width: 1;
}
line {
stroke: #aaa;
}
text {
font-family: Arial;
font-size: 9pt;
fill: #555;
}
circle {
cursor: pointer;
}
Javascript-
var data = [["2013-01-24 06:38:02.235191", 52], ["2013-01-23 06:38:02.235310", 54], ["2013-01-22 06:38:02.235330", 45], ["2013-01-21 06:38:02.235346", 53]],
maxValue = d3.max(data, function (d) { return d[1]; }),
margin = {top: 20, right: 20, bottom: 50, left: 50},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
svg, x, y, xAxis, yAxis, line;
$.each(data, function(index, val) {
val[0] = new Date(val[0]);
});
x = d3.time.scale()
.range([0, width])
y = d3.scale.linear()
.domain([0, maxValue])
.range([height, 0]);
xAxis = d3.svg.axis()
.scale(x)
.tickSize(4, 2, 0)
.ticks(d3.time.days, 1)
.tickFormat(d3.time.format("%m/%d"))
.orient("bottom");
yAxis = d3.svg.axis()
.scale(y)
// .ticks(5)
// .tickValues([0, maxValue * 0.25, maxValue * 0.5, maxValue * 0.75, maxValue])
.tickSize(4, 2, 0)
.orient("left");
line = d3.svg.line()
.x(function(d) { return x(d[0]); })
.y(function(d) { return y(d[1]); });
svg = d3.select("#chart-holder").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 + ")");
x.domain(d3.extent(data, function(d) { return d[0]; }));
y.domain([d3.min(data, function (d) { return d[1]; })-1, maxValue]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("transform", function(d) {
return "rotate(-60)translate(" + -this.getBBox().height * 1.7 + "," +
-this.getBBox().width/4 + ")";
});
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("Engagement");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
svg
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("fill", "#0b8da0")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d[0]); })
.attr("cy", function(d) { return y(d[1]); })
.on("mouseover", function(d) { showData(this, d);})
.on("mouseout", function() { hideData(this);});
function showData(obj, d) {
var coord = d3.mouse(obj);
var chartTip = d3.select(".chart-tip");
var format = d3.time.format("%b %d, %Y");
// enlarge circle
d3.select(obj)
.attr('r', 5);
// now we just position the chartTip roughly where our mouse is
chartTip.style("left", (coord[0] + 60) + "px" );
chartTip.style("top", (coord[1] + 10) + "px");
$(".chart-tip").html('<span class="v">' + d[1] + '</span>' + format(d[0]));
$(".chart-tip").fadeIn(100);
}
function hideData(obj) {
// enlarge circle
d3.select(obj)
.attr('r', 3.5);
$(".chart-tip").fadeOut(100);
}
$('#chart-holder').append($('<div />', {
'class': 'chart-tip'
}));
这是小提琴
http://jsfiddle.net/murli2308/n7Vmr/12/
如果我使用有序比例或线性比例,我可以在轴和线之间添加空格。但当我使用时间刻度时,我无法在轴和线之间添加空间。
我试过
x = d3.time.scale()
.range([0, width]);
它不起作用。
x.domain
是用户空间到像素空间映射的用户空间侧。在您的代码中,您将域设置为:
x.domain(d3.extent(data, function(d) { return d[0] - 1; }));
它说,从我的最小时间减去1毫秒开始我的x轴。
如果你想在行前/行后留出一些空间。尝试:
x.domain([
d3.min(data, function(d) { return d[0].getTime() - 1.8e+7; }),
d3.max(data, function(d) { return d[0].getTime() + 1.8e+7; })
]);
它说在我的最小约会前5小时开始我的x轴,在我的最大约会后5小时停止。
更新的小提琴。
编辑
刚刚使用了一个基于百分比的方案,比如你想要5%的填充(3.6小时的当前数据):
var minDate = d3.min(data, function(d) { return d[0].getTime(); }),
maxDate = d3.max(data, function(d) { return d[0].getTime(); }),
padding = (maxDate - minDate) * .05;
x.domain([minDate - padding, maxDate + padding]);
更新的小提琴。
相关文章:
- 在Jquery调用之间添加其他函数
- 在图例项目之间添加额外空间的高图表
- 如果两个波浪号字符之间的字符计数大于60,则在两个波浪字字符之间添加波浪号
- highcharts-在类别中的行之间添加单独的行
- 在jQuery中,可以在字符串之间添加条件逻辑吗
- 在javascript数组元素之间添加换行符
- 在按钮之间添加隐藏空间
- Ext JS Gannt 在任务之间添加链接
- 如何在离子标签之间添加常见内容
- 如何在两个图像之间添加空间
- 一种在指定时间后更改的背景图像之间添加更平滑过渡的简单方法
- 需要在两个背景之间添加淡入淡出效果
- Javascript匹配字符并在两者之间添加空格
- 如何在 nvd3 图例和图表之间添加间隙
- 如何在 {{#each}} 循环中的元素之间添加分隔符,最后一个元素之后除外
- Lightbox2:如何在“lb-prev”和“lb-next”分区之间添加“编辑”
- 在“for”循环迭代之间添加延迟
- 如何在 pre 标记之间添加文本
- 在x轴和带时间刻度的直线之间添加空格
- fullpage.js在节之间添加了2个自动滚动事件