javascript - 时间轴上的鱼眼效果

Question

我正在尝试使用 D3.js 创建时间线。我将在时间轴上绘制事件，并且我希望在将鼠标悬停在时间轴上时具有鱼眼效果。

我的时间表在这里:http://codepen.io/fabianmossberg/pen/gaRwXG

引用:http://bost.ocks.org/mike/fisheye/上的第三张图但仅限 X 轴。

我还希望退出时间线时鱼眼效果能够平滑，就像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>

Answer 1

好吧，我在这里尝试了很多东西，而且我已经接近我想要的东西了。我想我会在这里分享结果。

我在此版本中删除了 d3-timeline 库。仍有改进的空间，但这解决了我首先提出的问题。

//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>