Рисование за пределами границ графа

Question

Я создаю d3-график некоторых данных, и я хотел бы иметь возможности масштабирования и панорамирования. Когда я рисую свои данные и увеличиваю или панорамирую, данные могут перемещаться за пределы определенной области графика без обрезки.

Как вы можете видеть на изображении, оранжевые точки появляются в зеленой зоне, когда я ожидал, что они будут обрезаны.

Любые идеи о том, что не так?

Демо на http://jsfiddle.net/ng6srz4o/

var dataX = [1,3,5,7,9]; 
var dataY = [0,2,4,6,8]; 

var margin, padding, outerWidth, outerHeight, innerWidth, innerHeight; 
var xAxis, yAxis, xScale, yScale, svg, container, zoom, tooltip; 

// assign the dimensions here, works the best 
outerWidth = Math.ceil ($(window).width() * 0.90); 
outerHeight = Math.ceil ($(window).height() * 0.55); 

// distance of the outerRect from the innerRect 
margin = { top: 16, right: 16, bottom: 32, left: 32 }; 

// distance of the actual data from the innerRect 
padding = { top: 0, right: 32, bottom: 0, left: 32 }; 

innerWidth = outerWidth - margin.left - margin.right; 
innerHeight = outerHeight - margin.top - margin.bottom; 

xScale = d3.scale.linear() 
    .domain([ d3.min(dataX), d3.max(dataX) ]) 
    .range([ padding.left, innerWidth - padding.right ]); 

yScale = d3.scale.linear() 
    .domain([ d3.min(dataY), d3.max(dataY) ]) 
    .range([ innerHeight - padding.bottom, padding.top ]); 

zoom = d3.behavior.zoom() 
    .x(xScale).y(yScale) 
    .scaleExtent([1, 20]) 
    .on ("zoom", onZoom); 

svg = d3.select("#svgContainer") 
    .append("svg:svg") 
     .attr("width", outerWidth) 
     .attr("height", outerHeight) 
     .style("background", "green") 
    .append("svg:g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom); 

drawAxis(); 

// white rect behind the graph 
var rect = svg.append("svg:rect") 
    .attr("width", innerWidth) 
    .attr("height", innerHeight) 
    .style("fill", "gray"); 

container = svg.append("svg:g"); 

var graph = container.append("svg:g").selectAll("scatter-dots") 
     .data(dataY) 
    .enter().append("svg:circle") 
     .attr("cy", function (d) { return yScale(d); }) 
     .attr("cx", function (d,i) { return xScale(dataX[i]); }) 
     .attr("r", 10) 
     .style("fill", "orange"); 

function onZoom() { 

    var t = d3.event.translate, 
     s = d3.event.scale; 

    container.attr("transform", "translate(" + t + ")scale(" + s + ")"); 

    svg.select(".x.axis").call(xAxis); 
    svg.select(".y.axis").call(yAxis); 
} 

function drawAxis() 
{ 
    xAxis = d3.svg.axis() 
     .scale(xScale) 
     .orient("bottom"); 

    svg.append("svg:g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + innerHeight + ")") 
     .style("fill", "blue") 
     .call(xAxis); 

    yAxis = d3.svg.axis() 
     .scale(yScale) 
     .orient("left"); 

    svg.append("svg:g") 
     .attr("class", "y axis") 
     .style("fill", "red") 
     .call(yAxis); 
} 

Answer 1

Прямо сейчас, у вас есть все ваши очки, содержащиеся в g элемент, который не обрежет любой из точек, которые вы рисуете.

Если вы хотите подрезать очки, вы можете добавить svg элемент ваш главный svg, который будет обрезать все, что содержится внутри, например, так:

var mainSVG = d3.select('body').append('svg') 
    .attr('width', outerWidth) 
    .attr('height', outerHeight); 

var innerSVG = mainSVG.append('svg') 
    .attr('width', innerWidth) 
    .attr('height', innerHeight) 
    .selectAll('scatter-dots') 
    ... 

(updated) fiddle.