javascript - 在图形边界之外绘制

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.