问题：
时间轴上的鱼眼效应
钦良弼
我正在尝试用D3创建一个时间线。js。我将在时间轴上绘制事件，我希望在悬停时间轴时具有鱼眼效果。
我的时间表如下：http://codepen.io/fabianmossberg/pen/gaRwXG
参考：第三张图表http://bost.ocks.org/mike/fisheye/但仅限于X轴。
我还希望鱼眼效果在退出timline时变得平滑，就像在上一样http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/
我似乎不知道如何以及在哪里包含fisheye代码，以及如何让它像我想要的那样工作。非常感谢您在这方面的帮助！
var width = 980;
function timelineCircle() {
var chart = d3.timeline()
.tickFormat({
format: d3.time.format("%B"),
tickTime: d3.time.month,
tickInterval: 1,
tickSize: 20
})
.display("circle");
var svg = d3.select("#timeline").append("svg").attr("width", width)
.datum(testData).call(chart)
.on("mousemove", function() {
console.log('Fisheye please!');
});
}
var testData = [{
times: [{
"color": "green",
"starting_time": 1147803780000,
"ending_time": 1147803780000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147551840000,
"ending_time": 1147551840000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147551840000,
"ending_time": 1147551840000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147472820000,
"ending_time": 1147472820000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147434780000,
"ending_time": 1147434780000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147272360000,
"ending_time": 1147272360000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147271580000,
"ending_time": 1147271580000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147179480000,
"ending_time": 1147179480000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1147179120000,
"ending_time": 1147179120000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146918780000,
"ending_time": 1146918780000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146755520000,
"ending_time": 1146755520000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146755340000,
"ending_time": 1146755340000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146490380000,
"ending_time": 1146490380000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146350460000,
"ending_time": 1146350460000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146246240000,
"ending_time": 1146246240000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146244800000,
"ending_time": 1146244800000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146167940000,
"ending_time": 1146167940000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146166860000,
"ending_time": 1146166860000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1146075600000,
"ending_time": 1146075600000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145886660000,
"ending_time": 1145886660000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145885880000,
"ending_time": 1145885880000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145738820000,
"ending_time": 1145738820000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145737980000,
"ending_time": 1145737980000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145299860000,
"ending_time": 1145299860000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1145131080000,
"ending_time": 1145131080000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144950360000,
"ending_time": 1144950360000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144874040000,
"ending_time": 1144874040000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144854840000,
"ending_time": 1144854840000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144696320000,
"ending_time": 1144696320000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144696320000,
"ending_time": 1144696320000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144519560000,
"ending_time": 1144519560000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144518600000,
"ending_time": 1144518600000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144358940000,
"ending_time": 1144358940000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144274100000,
"ending_time": 1144274100000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144191060000,
"ending_time": 1144191060000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144190460000,
"ending_time": 1144190460000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144081200000,
"ending_time": 1144081200000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1144072440000,
"ending_time": 1144072440000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143993600000,
"ending_time": 1143993600000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143993360000,
"ending_time": 1143993360000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143821520000,
"ending_time": 1143821520000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143821160000,
"ending_time": 1143821160000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143742920000,
"ending_time": 1143742920000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143741840000,
"ending_time": 1143741840000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143639780000,
"ending_time": 1143639780000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143639000000,
"ending_time": 1143639000000
}, ]
}, {
times: [{
"color": "green",
"starting_time": 1143423240000,
"ending_time": 1143423240000
}, ]
}, ];
timelineCircle(); .axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
#timeline .axis {
transform: translate(0px, 40px);
-ms-transform: translate(0px, 40px);
/* IE 9 */
-webkit-transform: translate(0px, 40px);
/* Safari and Chrome */
-o-transform: translate(0px, 40px);
/* Opera */
-moz-transform: translate(0px, 40px);
/* Firefox */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://x.resdagboken.se/js/d3-timeline.js"></script>
<script src="http://x.resdagboken.se/js/fisheye.js"></script>
<div>
<h3>Timeline</h3>
<div id="timeline"></div>
</div>共有1个答案
尹善
好的，我一直在尝试米隆的东西，我有点接近我要找的。我想在这里分享结果。
我在这个版本中删除了d3时间线库。还有改进的余地，但这解决了我第一次提出的问题。
js lang-js prettyprint-override">//Defining the trips
var myTrips = [{
"day": 1,
"post": 101,
"title": "First day"
}, {
"day": 2,
"post": 102,
"title": "Second day"
}, {
"day": 3,
"post": 103,
"title": "Third day"
}, {
"day": 5,
"post": 103,
"title": "Third day"
}, {
"day": 12,
"post": 103,
"title": "Third day"
}, {
"day": 13,
"post": 103,
"title": "Third day"
}, {
"day": 15,
"post": 104,
"title": "Forth day"
}, {
"day": 17,
"post": 104,
"title": "Forth day"
}, {
"day": 18,
"post": 104,
"title": "Forth day"
}, {
"day": 22,
"post": 104,
"title": "Forth day"
}, {
"day": 24,
"post": 104,
"title": "Forth day"
}, {
"day": 25,
"post": 104,
"title": "Forth day"
}, {
"day": 30,
"post": 104,
"title": "Forth day"
}, {
"day": 31,
"post": 104,
"title": "Forth day"
}, {
"day": 32,
"post": 104,
"title": "Forth day"
}, {
"day": 33,
"post": 104,
"title": "Forth day"
}, {
"day": 34,
"post": 104,
"title": "Forth day"
}, {
"day": 36,
"post": 104,
"title": "Forth day"
}, {
"day": 37,
"post": 104,
"title": "Forth day"
}, {
"day": 38,
"post": 104,
"title": "Forth day"
}, {
"day": 39,
"post": 104,
"title": "Forth day"
}, {
"day": 45,
"post": 104,
"title": "Forth day"
}, {
"day": 46,
"post": 104,
"title": "Forth day"
}, {
"day": 47,
"post": 104,
"title": "Forth day"
}, {
"day": 50,
"post": 104,
"title": "Forth day"
}, {
"day": 55,
"post": 104,
"title": "Forth day"
}, {
"day": 56,
"post": 104,
"title": "Forth day"
}, {
"day": 58,
"post": 104,
"title": "Forth day"
}, {
"day": 59,
"post": 104,
"title": "Forth day"
}, {
"day": 60,
"post": 104,
"title": "Forth day"
}, {
"day": 62,
"post": 104,
"title": "Forth day"
}, {
"day": 64,
"post": 104,
"title": "Forth day"
}, {
"day": 65,
"post": 104,
"title": "Forth day"
}, {
"day": 78,
"post": 104,
"title": "Forth day"
}, {
"day": 79,
"post": 104,
"title": "Forth day"
}];
function x(d) {
return d.day;
}
var collection_array = d3.values(myTrips);
maximum = d3.max(collection_array, function(d) {
return d.day
});
var maxnum = 80;
var margin = {
top: 0,
right: 15,
bottom: 0,
left: 15
},
width = 615,
height = 40,
radius = 8;
var xScale = d3.fisheye.scale(d3.scale.linear).domain([0, maximum + 1]).range([0, width]);
var tooltip = d3.select("#infobox")
.append("div")
.attr("class", "infocontent")
.style("z-index", "10")
.style("visibility", "hidden");
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).tickFormat(d3.format(",d")).tickSize(-height);
var svg = d3.select("#timeline").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 + ")");
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
//Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var dot = svg.append("g")
.attr("class", "dots")
.selectAll(".dot")
.data(myTrips)
.enter().append("circle")
.attr("class", "dot")
.style("fill", "green")
.attr("r", function(d) {
d.r
})
.call(position)
.on("mouseover", function(d) {
d3.select(this).style("fill", "red");
return tooltip.style("visibility", "visible").text('Day ' + d.day + ' - ' + d.title);
})
.on("mouseout", function() {
d3.select(this).style("fill", "green");
return tooltip.style("visibility", "hidden");
});
// Add a title.
dot.append("title")
.text(function(d) {
return d.title;
});
// Positions the dots based on data.
function position(dot) {
dot.attr("cx", function(d) {
return xScale(x(d));
})
.attr("cy", height / 2)
.attr("r", radius);
}
svg.on("mousemove", function() {
var mouse = d3.mouse(this);
xScale.distortion(5).focus(mouse[0]);
dot.call(position);
svg.select(".x.axis").call(xAxis);
})
.on("mouseout", function() {
var mouse = d3.mouse(this);
xScale.distortion(0).focus(mouse[0]);
dot.call(position);
svg.select(".x.axis").call(xAxis);
});
var totalRows = 80;
html {
font-family: OpenSans;
font-size: 12px;
}
.background {
fill: none;
pointer-events: all;
}
#timeline {
width: 630px;
}
#timeline .background {
fill: white;
}
#timeline .dot {
stroke: white;
}
.axis path,
.axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
#infobox {
width: 630px;
}
.infocontent {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
top: 10px;
padding: 10px;
}
.infocontent:after,
.infocontent:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.infocontent:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 10px;
margin-left: -10px;
}
.infocontent:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 16px;
margin-left: -16px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://x.resdagboken.se/js/fisheye.js"></script>
<div id="timeline"></div>
<div id="infobox"></div>
类似资料：
-
我试图扭曲d3.geo.path（）地图与fisheye.js插件（https://github.com/d3/d3-plugins/tree/master/fisheye）。 要扭曲一个对象，插件需要x 在d3中。它说： 投影函数采用表示位置坐标的两元素数字数组[经度，纬度]，并返回表示投影像素位置[x，y]的类似两元素数字数组。例如，基本的球面墨卡托投影： https://github.com
-
我已经成功地为一个示例数据集实现了codeflower视图。用于实现这一目标的代码是： 我现在希望添加鱼眼扭曲到这个可视化，不知道如何去做。我已经研究了鱼眼的留档，但当我使用codeflower.js我不确定如何访问svg元素了。任何帮助都很感激。谢谢你。
-
问题内容： 我正在寻找创建鱼眼镜头效果的方法，查看了openCV的文档，看起来它包含针对像鱼眼这样的径向变形的“相机校准”功能。是否可以通过openCV模拟鱼眼失真？ 如果与openGL相比，openCV可以做到，哪一个会产生更好的结果？谢谢。 问题答案： 我使用opencv创建了此应用。这是您所指的效果吗？我基本上编码了维基百科“ Distortion（optics）”上显示的公式，如果需要，我
-
基础时间轴 时间轴可让你将多个动画同步在一起。 默认情况下，添加到时间轴的每个动画都会在上一个动画结束时开始。 创建时间轴： var myTimeline = anime.timeline(parameters); Argument Type Info Required parameters Object The default parameters of the timeline inherit
-
TimeLine 时间轴 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 该组件左边图标默认为显示一个点，如需自定义，请通过name为node的slot传入内容 组件右边内容为了更强的自定义，需要请通过name为content的slot传入 以下为基本示例，完整示例请见演示部分 <template> <u-time-
-
嗨，我想使用鱼眼失真插件为我的力定向图在d3。但当我想应用这个插件时，graph的行为很奇怪。我是d3新手。而且不擅长计算机图形学。 在jsfiddle中完成示例 奇怪的行为我的意思是图的节点在鼠标悬停后消失（隐藏）。