D3 Zooming in graph

Question

i have tried using D3.zoom behavior in my scatterplot graph.

But the problem i am having now is that, i can only zoom my graph ONLY when i mouseover my DOT. Any reasons why? I want it to be able to zoom in anywhere as long as my mouse is pointing inside the graph. And also, my X axis doesn't stays at the bottom... it gets zoomed in as well Is it possible to just let the X Axis stay constant at the bottom?

here are my codes...

var margin = {top: 30, right: 20, bottom: 30, left: 50},    
width = 650 - margin.left - margin.right,               
height = 400 - margin.top - margin.bottom;              


var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;  


var x = d3.time.scale().range([0, width]);  
var y = d3.scale.linear().range([height, 0]);           


var zoom = d3.behavior.zoom()
.scaleExtent([0.95, 10])
.on("zoom", zoomed);

var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);


var xAxis = d3.svg.axis().scale(x)                          
.orient("bottom").ticks(5);                             


var valueline = d3.svg.line()                               
.x(function(d) { return x(d.ArtDateTime); })                
.y(function(d) { return y(d.Ranking); });                   


var svg = d3.select(".graph")
.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 + ")")
.call(zoom);


function zoomed() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
svg.selectAll("g")
    .attr("width", width)
    .attr("height", height);
}



function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4)
}


function make_y_axis() {
return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(4)
}


function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}


function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}


function dragended(d) {
  d3.select(this).classed("dragging", false);
}


d3.csv("FinalCSVFile.csv", function(error, data) {              
data.forEach(function(d) {                              
    d.ArtDateTime = parseDate(d.ArtDateTime);                           
    d.Ranking = +d.Ranking;                                 
});


x.domain(d3.extent(data, function(d) { return d.ArtDateTime; }));   
y.domain([0, d3.max(data, function(d) { return d.Ranking; })]); 

// Add the X Axis
svg.append("g") 
    .transition()   
    .duration(300)                                  
    .attr("class", "x axis")                            
    .attr("transform", "translate(0," + height + ")")   
    .call(xAxis);                                       

svg.append('g')
    .transition()
    .duration(300)
    .attr('class', 'grid')
    .attr('transform', 'translate(0,' + height + ")")
    .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat("")
        )

svg.append('g')
    .transition()
    .duration(300)
    .attr("class", "grid")
    .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat("")
        )

svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 5)
    .attr("cx", function(d) { return x(d.ArtDateTime);})
    .attr("cy", function(d) { return y(d.Ranking * 3); })
    .on("mouseover", function(d) {
        var xPosition = parseFloat(d3.select(this).attr("cx"));
        var yPosition = parseFloat(d3.select(this).attr("cy"));
        d3.select(this)
            .transition()
            .duration(20)
        .style("fill", "red");

    d3.select("#box")
        .transition()
        .duration(300)
        .style("left", xPosition + 80 + "px")
        .style("top", yPosition + 140 +"px" )
        .select("#ranking")
        .text(d.Ranking)

    d3.select("#box")
        .select("#startDT")
        .text(d.startDateTime)

    d3.select("#box")
        .select("#senCONT")
        .text(d.sentenceContent)

    d3.select("#tooltip")
        .classed("hidden", false);

    })
        .on("mouseout", function() {
    d3.select("#tooltip")
    .classed("hidden", true);
    });
});

Answer 1

The reason you can't zoom in on the white areas is because there is actually nothing there to zoom in on. Paste this code below into your jsfiddle example at line 39 (after you've created the svg variable) to append a background rectangle behind your graph that you can zoom in on.

      svg.append("rect")
         .attr("width", width)
         .attr("height", height)
         .style("fill", "#fff");