3
Я пытаюсь создать временную шкалу с D3.js. Я буду отображать события на шкале времени, и я хочу иметь эффект рыбий глаз, когда вы наведете график.Fisheye эффект на временной шкале
Мой график здесь: 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/
Я не могу показаться, чтобы выяснить, где и как включить код сверхширокоугольного, и как заставить его работать, как я хочу , Был бы очень признателен за любую помощь в этом!
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>