d3.js：可重复使用的clipPath用于多个svg：文本元素

Question

我有一个带有许多文本字符串的d3.js图表​​，如果时间太长，需要将其截断。

从我的研究，它似乎处理的文本截断在SVG是对方式：通过，直到边界框小于截断字符

1. 使用SVG clipPath
2. 使用SVG getBBox（）和环路最大
3. 只需使用最好的猜测最大字符长度和截断字符串
4. 也许使用foreignObject插入HTML对象插入图表，然后使用CSS

我期待在选项＃1，挣扎......

有没有一种方法来创建特定尺寸的clipPath，然后引用多个SVG是clipPath：g或SVG：文本元素，并有clipPath放置在对象的本地翻译坐标中？

有没有办法使用“符号”或“使用”，使其可重用，或者我必须为每个文本字符串生成一个唯一的clipPath ?!

不知道这是否合理。

这里是我的概念证明原油不起作用：

http://jsfiddle.net/rolfsf/9TVq2/

var svg = d3.select("#test") 
      .append("svg") 
      .attr("width", 300) 
      .attr("height", 300) 
      .attr("class", "test-container"); 

var defs = d3.select('.test-container').append("svg:defs"); 

    defs.append("svg:clipPath") 
     .attr("id", "textclip") 
     .append("svg:rect") 
     .attr("width", 200) 
     .attr("height", 20) 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("clipPathUnits","objectBoundingBox"); 

    svg.append("g") 
     .attr("class", "textgroup") 
     .attr("transform", "translate(10, 100)") 
     .attr("clip-path", "url(#textclip)") 
     .append("text") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("fill", "#000") 
     .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit."); 

    svg.append("g") 
     .attr("class", "textgroup") 
     .attr("transform", "translate(10, 150)") 
     //.attr("clip-path", "url(#textclip)") 
     .append("text") 
     .attr("x", 0) 
     .attr("y", 0) 
     .attr("fill", "#000") 
     .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.");  

Answer 1

回答我的问题

问题涉及不匹配的协调clippath和G之间的空间。该clippath需要有相反的坐标空间应用

看到更新后的提琴：http://jsfiddle.net/rolfsf/6nDW6/

defs.append("svg:clipPath") 
    .attr("id", "textclip") 
    .attr("transform", "translate(-10, -20)") 
    .append("svg:rect") 
    .attr("width", 200) 
    .attr("height", 20) 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("clipPathUnits","objectBoundingBox");