Question

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

从我的研究来看，似乎在svg中处理文本截断的方法是：

使用SVG clipPath
使用SVG getBBox（）并循环截断字符，直到边界框小于max
只需对最大字符长度使用最佳猜测并截断字符串
也许使用foreignObject将HTML对象插入图表，然后使用css

我正在考虑选项＃1，并且正在努力......

有没有办法创建特定维度的clipPath，然后引用多个svg：g或svg：text元素的clipPath并将clipPath放在对象的本地翻译坐标中？

有没有办法使用“symbol”或“use”来使这个可重用，或者我是否必须为每个文本字符串生成一个唯一的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");

d3.js：多个svg：text元素的可重用clipPath

1 个答案: