如何为图表添加剪辑路径？

Question

我有这个小提琴：http://jsfiddle.net/q0ubpmwj/5/

我一直在尝试使用剪辑路径，因此图形不会超出轴，但我似乎无法使其工作。

下面是我使用的一些剪辑路径代码，但它似乎无法工作：/

var svg = viewer.append("svg").attr('id', 'viewerPins')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var clip = viewer.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("id", "clip-rect")
        .attr("x", "0")
        .attr("y", "0").attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
        .attr("clip-path", "url(#clip)")
        //.call(zoom)
;

Answer 1

你将defs附加到svg：

之外

viewer.append("defs").append("svg:clipPath")

应该是

svg.append("defs").append("svg:clipPath")