Trying to Zoom Diamonds and Circles

No current solution available

by helloGoodDay

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="timeline"></div>

JavaScript

var w = 1200,
  h = 200,
  counter = -1,
  parseDate = d3.time.format("%Y-%m-%d").parse;

// {{{
flights = ["1988-01-01", "1988-01-02", "1988-01-03",
  "1988-01-04", "1988-01-05", "1988-01-06",
  "1988-01-07", "1988-01-08", "1988-01-09",
  "1988-01-10", "1988-01-11", "1988-01-12",
  "1988-01-13", "1988-01-14", "1988-01-15",
  "1988-01-16", "1988-01-17", "1988-01-18",
  "1988-01-19", "1988-01-20", "1988-01-21",
  "1988-01-22", "1988-01-23", "1988-01-24",
  "1988-01-25", "1988-01-26", "1988-01-27",
  "1988-01-28", "1988-01-29", "1988-01-30",
  "1988-01-31", "1988-02-01", "1988-02-02",
  "1988-02-03", "1988-02-04", "1988-02-05",
  "1988-02-06", "1988-02-07", "1988-02-08",
  "1988-02-09", "1988-02-10", "1988-02-11",
  "1988-02-12", "1988-02-13", "1988-02-14",
  "1988-02-15", "1988-02-16", "1988-02-17",
  "1988-02-18", "1988-02-19", "1988-02-20"
].map(function(d) {
  return parseDate(d)
});
// }}}



svg = d3.select("#timeline")
  .append("svg")
  .attr("width", w)
  .attr("height", h);


var scale = d3.time.scale()
  .domain([flights[0], flights[flights.length - 1]])
  .range([10, w - 110]);


var xaxis = d3.svg.axis().scale(scale)
  .orient("bottom");


var zoom = d3.behavior.zoom()
  .on("zoom", function() {
    svg.select("g").call(xaxis).selectAll("text").style("font-size", "10px");
    update_events();
    //svg.selectAll(".item").attr("transform", "translate(" + d3.event.translate[0]+", 0)scale(" + d3.event.scale+", 1)");
  }).x(scale);


var rect = svg.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", w - 100)
  .attr("height", h)
  .attr("opacity", 0)
  .call(zoom);

svg.append("g")
  .attr("class", "xaxis")
  .call(xaxis)
  .selectAll("text")
  .style("font-size", "10px");

svg.append("line")
  .attr("x1", w / 2)
  .attr("x2", w / 2)
  .attr("y1", 0)
  .attr("y2", h)
  .style("stroke", "rgb(6,120,255)");


function draw_events(dates) {

  var events = svg.selectAll("circleDiamond.item").data(dates);

  events.enter()
    .append("path")
   ...