用时间刻度在x轴和line之间添加空格 [英] Add space between x-axis and line with time scale
本文介绍了用时间刻度在x轴和line之间添加空格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML -
< div id =chart-holder>< / div>
CSS -
.chart-holder {
position：relative;
font-family：Helvetica，sans-serif;
}
。图表提示{
display：none;
位置：绝对;
min-width：70px;
top：0px;
left：0px;
padding：3px 5px;
background：rgba（0，0，0，0.8）;
颜色：#fff;
font-size：.8em;
text-shadow：none;
text-align：center;
z-index：10500;
border-radius：3px;
}
.v {
display：block;
font-size：1.2em;
}
路径{
stroke：＃0da9c0;
stroke-width：2;
fill：none;
}
path.domain {
stroke：#aaa;
stroke-width：1;
}
行{
stroke：#aaa;
}
text {
font-family：Arial;
font-size：9pt;
填写：＃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数据，函数（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;
$ b $ .each（data，function（index，val）{
val [0] = new Date（val [0]）;
}）;
x = d3.time.scale（）
.range（[0，width]）
y = d3.scale.linear（）
。域（[0，maxValue]）
.range（[height，0]）;
xAxis = d3.svg.axis（）
.scale（x）
.tickSize（4，2，0）
.ticks（d3.time。天，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];}））; $ d $ b y.domain（[d3.min（data，function（d）{return d [1];}） - 1，maxValue]）;
svg.append（g）
.attr（class，x axis）
.attr（transform，translate（0，+ （）;}
.call（xAxis）
.selectAll（text）
.attr（transform，function（d）{
returnrotate（ -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 ，线）;
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）;
//放大圆
d3.select（obj）
.attr（'r'，5）;
//现在我们只需将图表提示放在鼠标所在位置
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）;
函数hideData（obj）{
//放大圆
d3.select（obj）
.attr（'r'，3.5） ;
$（。chart-tip）。fadeOut（100）;
$ b $（'＃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;}））;
在我的最小时间开始我的x轴减1毫秒。
如果你想在行前/后添加一些空格。尝试：
$ $ p $ $ $ $ $ $ $ $ $ $ ] .getTime（） - 1.8e + 7;}），
d3.max（data，function（d）{return d [0] .getTime（）+ 1.8e + 7;}）
]）;
在我的最短日期前5小时开始我的x轴并在我的最长日期后5小时停止。
更新了小提琴。
EDITS
只需使用基于百分比的方案，小时数与您当前的数据）：
var minDate = d3.min（data，function（d）{return d [0] .getTime（）;}），
maxDate = d3.max（data，function（d）{return d [0] .getTime（）;}），
padding =（maxDate - minDate）* 0.05;
x.domain（[minDate - padding，maxDate + padding]）;
更新小提琴。
I am using an example below.
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'
}));
Here is the fiddle
http://jsfiddle.net/murli2308/n7Vmr/12/
I can add space between axis and line if I am using ordinal scale or linear scale. But when I am using time scale, I am not able to add space between axis and line.
I tried
x = d3.time.scale()
.range([0, width]);
It is not working.
解决方案
The x.domain is the user space side of the user space to pixel space mapping. In your code you are setting the domain as:
x.domain(d3.extent(data, function(d) { return d[0] - 1; }));
Which says start my x axis at my min time minus 1 millisecond.
If you want some space before / after the line. Try:
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; })
]);
Which says start my x axis 5 hours before my min date and stop it 5 hours after my max date.
Updated fiddle.
EDITS
Just used a percentage based scheme, say you want 5% padding (3.6 hours with your current data):
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]);
Updated fiddle.
这篇关于用时间刻度在x轴和line之间添加空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
