D3 확대 그래프

Question

내 scatterplot 그래프에서 D3.zoom 동작을 사용해 보았습니다.

하지만 지금 문제는 내가 mouseover 할 때 내 그래프 만 확대/축소 할 수 있다는 것입니다. 이유가 무엇입니까? 내 마우스가 그래프를 가리키고있는 한 아무 데서나 확대 할 수 있기를 바랍니다. 그리고 내 X 축은 맨 아래에 있지 않습니다 ... 또한 확대됩니다. X 축을 아래쪽에서 일정하게 유지할 수 있습니까? 여기

이 아무것도 실제로 없다에 확대 때문에 흰색 영역을 확대 할 수

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

이유는 ... 내 코드입니다. 이 코드를 jsfiddle 예제의 39 번째 줄 (svg 변수를 생성 한 후)에 붙여 넣으면 그래프 뒤에 배경 사각형을 추가하여 확대 할 수 있습니다.

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