我有一个类似于http://bl.ocks.org/mbostock/4015254的示例，其中我在左侧和右侧的图表中剪切了额外的点。不幸的是，当它由D3呈现时它似乎不起作用。但是，如果我将SVG音符（和样式）复制粘贴到此处http://cssdesk.com/ZzNtk，它剪辑就可以了。
基本上它是渲染正确的SVG元素，但是clipPath似乎没有影响。
我怀疑过渡可能与它有关，所以我尝试了它而没有过渡而没有效果。
创建我的问题的jsFiddle并非易事，但这里是我正在使用的代码的要点：
https://gist.github.com/chrisnicola/0ea1acd01ee0b23e2502
相关代码（也是因为有关jsFiddle链接的愚蠢SO政策）
initializeGraph: =>
@initialized = true
@width = @element.offsetWidth - margin.left - margin.right
@height = @element.offsetHeight - margin.top - margin.bottom
@chart = d3.select(@element).append("svg")
.attr("width", @width + margin.left + margin.right)
.attr("height", @height + margin.top + margin.bottom)
@graph = @chart.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
format = d3.format(",.0f");
@x = d3.scale.linear().range([0, @width])
@y = d3.scale.linear().range([@height, 0])
@graph.append("defs").append("clipPath").attr("id", "myClip")
.append("rect")
.attr("id", "myClip-rect")
.attr("x", @x(0) + 1).attr("y", @y(1))
.attr("width", @x(1) - @x(0) - 2).attr("height", @y(0) - @y(1))
@xAxis = d3.svg.axis().scale(@x).orient("bottom").ticks(5)
@graph.append("g").attr("class", "x axis")
.attr("transform", "translate(0, #{@height})")
@yAxis = d3.svg.axis().scale(@y).orient("left").ticks(5)
@yAxis.tickFormat((d) -> '$' + format(d / 1000) + 'k')
@graph.append("g").attr("class", "y axis")
@areaSavings = d3.svg.area()
.x((d) => @x(d.month / 12))
.y0(@height)
.y1((d) => @y(d.savings))
@lineSavings = d3.svg.line().x((d) => @x(d.month / 12))
.y((d) => @y(d.savings))
@graph.append("path").attr("class", "area plan-savings")
.attr("clip-path", "url(#myClip)")
@graph.append("path").attr("class", "line plan-savings")
.attr("clip-path", "url(#myClip)")
@graph.append("path").attr("class", "line goal-savings")
.attr("clip-path", "url(#myClip)")
之前还有一个类似的问题： Svg clip-path within rectangle does not work
明显的问题是a）没有为剪辑路径使用正确的id值。但是你会发现修复id本身并不能解决问题。解决方案涉及在路径周围的分组上设置剪辑路径。然而，这对我也不起作用。无论如何，这是jsFiddle：