D3js 轴裁剪不适用于 g 元素答案

【问题标题】：D3js axis clipping not working with g elementD3js 轴裁剪不适用于 g 元素
【发布时间】：2017-08-09 16:38:00
【问题描述】：

这会添加一个圆圈，分配剪辑路径：

    focus.selectAll("circle")
  .data(data).enter().append("circle")
  .attr("clip-path", "url('#clip')")
  .attr("class","dot")

  .attr("r", 4.5)
  .attr("opacity", 0.7)
  .style("fill",  "steelblue");

这会添加/克隆一个 xml 节点，它是一个 svg 图像 "B" ，并分配剪辑路径：

    var xmlSvgB = d3.select(xmlSvg).select('#b').node();
var gXml = focus.selectAll(".icon")
.data(data ).enter().append(function(){return xmlSvgB.cloneNode(true);})
.attr("clip-path", 'url("#clip2")')
.attr('class', 'icon')
.attr("opacity", 0.7)
.attr('id',function(d){return 'b_' + d.date.getTime();})
.attr('transform', function(d){
var xdate = x(d.date) - 11;
return "translate(" + xdate   + "," +  15 + ") scale(0.8)" ;});

我无法弄清楚为什么剪辑在一个圆圈上工作得很好，但在组元素上却不行......看起来应该。

An example of the problem d3 axis clipping works for circle, but not working for svg group element

两个剪辑路径的设置如下：

      var defs =  focus.append("defs");
    defs.append("clipPath")
      .attr("id", "clip")

      .append("rect")
      .attr("x", 0)
      .attr("y",0)
      .attr("width", width )
      .attr("height", height);

      defs.append("clipPath")
        .attr("id", "clip2")

        .append("rect")
        .attr("x", 0)
        .attr("y",0)
        .attr("width", width )
        .attr("height", height)
        ;

注意：如果控制台正在运行，有时“cloneNode(true)”会失败。这只是克隆“g”元素。

【问题讨论】：

clipPath 元素不支持“结构元素”，这很有趣，但不应该影响我的实现...请参阅：developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

标签： d3.js svg clip-path

【解决方案1】：

哇。好的，我希望这对其他人有帮助。我花了几天时间思考这个问题.. 真的，关于 Stackoverflow 的一些讨论让我明白了...... 诀窍是附加一个“g”元素并将“剪辑路径”分配给这个顶部元素，例如：

    var xmlSvgB = d3.select(xmlSvg).select('#b').node();
    var gXml = focus.selectAll(".icon-g")
    .data(data ).enter().append("svg:g")
    .attr("clip-path", function(){ return 'url("#clip")';})
    .attr("class","icon-g")
    .append(function(){return xmlSvgB.cloneNode(true);})
    .attr("opacity", 0.7)
   .attr('id',function(d){return 'i_' + d.date.getTime();})
   .attr('transform', function(d){
   var xdate = x(d.date) - 11;
   return "translate(" + xdate   + "," +  15 + ") scale(0.8)" ;});

这将剪裁多边形..

here is the same code, shown in the original problem, and now zooming and panning correctly clip the svg element

【讨论】：