剪切散点图表外的元素

1、剪切散点图表外的元素摘 要：这一节主要介绍了剪切散点图表外元素的方法。并给出相关代码。关键词：散点图；剪切路径；clipPath 1剪切散点图表外的元素不知道大家注意没注意一个细节，在这些过渡中，那些x 和y 值较低的圆形会超出图表区域的边界，与轴线重叠在一起，如下图：图1圆形超出了图表区域的散点图好在SVG 支持剪切路径（clipping：path），也就是Photoshop 或Illustrator 中的蒙版。剪切路径就是一个SVG 元素，可以包含可见的元素，并与这个可见元素一起构成可以应用到其他元素的剪切路径或蒙版。在把蒙版应用到某个元素时，只有落在该蒙版图形内部的像素才会显示。与g 元

2、素相似，clipPath 本身也不可见，但它可以包含可见的元素（这些元素用作蒙版）。比如，下面就是一个简单的剪切路径：<clipPath id="chart-area"><rect x="30" y="30" width="410" height="240"></rect></clipPath>注意外面的clipPath 元素有一个ID，值为chart-area。后面会通过这个ID 来引用它。这个剪切路径内部有一个矩形，将被用作蒙版。使用剪切路径的

3、步骤如下：1. 定义clipPath 并给它一个ID；2. 在这个clipPath 中放一个可见的元素（ 通常是一个rect， 但也可以包含circle 和其他可见元素）；3. 在需要使用蒙版的元素上添加一个对clipPath 的引用。仍以前面的散点图为例，下面我们通过一些新代码来定义剪切路径（完成第1 步和第2 步）：svg.append("clipPath").attr("id", "chart-area") .append("rect") .attr("x", padding).attr(

4、"y", padding).attr("width", w - padding * 3).attr("height", h - padding * 2);我们希望把这个蒙版应用给所有圆形， 可以分别为每个圆形都添加一个对该clipPath 的引用。但把所有圆形都放到一个分组g 中，然后给这个分组添加引用，会让代码更清晰也更简单（完成第3 步）：因此，我们要修改以下代码：svg.selectAll("circle").data(dataset).enter().append("circle").创

5、建新的g 元素，给它任意指定一个ID，最后把对ID 为chart-area 的剪切路径指定给它：svg.append("g") .attr("id", "circles") .attr("clip-path", "url(#chart-area)") .selectAll("circle") .data(dataset).enter().append("circle").注意在指定剪切路径时使用的属性名叫clip-path， 而这个元素的名称是clipPath。在Web 检查器中可以看到新创建的矩形。图2位于剪切路径中的矩形的大小由于剪切路径本身不可见（只用于遮挡其他元素），因此只能通过Web 检查器来高亮它。在Web 检查器中选择这个clipPath 后，就会看到蓝色的路径的轮廓、大小。可以看到这个clipPath 的位置和大小都合适。另外也要注意，所有圆形都已经被组织到一个g 元素中了。这个g 元素的clippath属性指向了新创建的剪切路径，