1

我有一个类似于http://bl.ocks.org/mbostock/4015254的示例，其中我在左侧和右侧的图表中剪辑了额外的点。不幸的是，当它由 D3 渲染时，它似乎不起作用。但是，如果我在这里http://cssdesk.com/ZzNtk复制粘贴 SVG 注释（和样式），它会很好地剪辑。

本质上它正在渲染正确的 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：

http://jsfiddle.net/dsummersl/EqLBJ/1/

4

0 回答 0