1

I have an example similar to http://bl.ocks.org/mbostock/4015254 where I clip the extra points in my graph on the left and right. Unfortunately it doesn't seem to work when it's rendered by D3. However if I copy-paste the SVG notes (and styles) over here http://cssdesk.com/ZzNtk it clips just fine.

Essentially it is rendering the correct SVG elements but the clipPath doesn't seem to have an impact.

I suspected the transition might have something to do with it so I tried it without a transition with no effect.

It isn't trivial to create a jsFiddle of my problem but here is a gist of the code that I'm using:

https://gist.github.com/chrisnicola/0ea1acd01ee0b23e2502

The relevant code (also because of the stupid SO policy about links to jsFiddle)

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)")

There was also a similar problem someone had earlier: Svg clip-path within rectangle does not work

The obvious problem was a) not using the right id value for the clip-path. However you'll notice that fixing the id by itself doesn't solve the problem. The solution involved setting the clip-path on a grouping around the paths. However this doesn't work for me either. Here is the jsFiddle anyways:

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

Community
  • 1
  • 1
Chris Nicola
  • 14,384
  • 6
  • 47
  • 61
  • 1
    Please add a small codesample and/or jsfiddle? – Erik Dahlström Oct 03 '13 at 21:42
  • I'd love to but it's going to take some time, the code is fairly complex and not quite that portable. I'll try to extract the problem. – Chris Nicola Oct 04 '13 at 01:10
  • This sounds like you're creating the clip path element (or something related to it) in the wrong namespace and therefore the browser doesn't render it. Make sure that you're attaching the SVG namespace to everything, especially if you're creating DOM elements with something else than D3. – Lars Kotthoff Oct 04 '13 at 08:40
  • The blocks example doesn't use namespaces so I'm not sure why that would matter. I'll give it a go though. You're suggesting using tags will help? Still doesn't explain why copying the resulting SVG HTML to CSSDesk works ok but when it's first rendered by D3 it doesn't work. – Chris Nicola Oct 04 '13 at 16:28
  • It looks like you've appended the `defs` to a `g` element instead of `svg`. – Lars Kotthoff Oct 04 '13 at 19:07
  • 1
    Which works fine in other examples such as this one http://jsfiddle.net/dsummersl/EqLBJ/1/. Either way moving it up a level has no effect. – Chris Nicola Oct 04 '13 at 19:09
  • Did you ever work this out? I'm having a similar issue. – Anthony Truskinger Jan 22 '15 at 13:24
  • 1
    I didn't, but I learned in another issue that you have to be careful how you reference using url(#name). Take a look at this question: http://stackoverflow.com/questions/25793720/d3-generated-lineargradient-not-working-in-firefox-ie – Chris Nicola Jan 23 '15 at 18:35

0 Answers0