javascript - 如何为我的图形添加剪辑路径？

Question

我有这个 fiddle :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

您将 def 附加到 svg 之外:

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

应该是

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