Question

我有一个带有长标签的c3图表。使用multiline-parameter将线包裹在可用空间的末尾，而不是正交的正确点。所以城镇名称“Kroppenstedt”，对于该线稍长，导致：

<tspan>Kroppensted</tspan>
<tspan>t</tspan>

而不是，f.i。：

<tspan>Kroppen-</tspan>
<tspan>stedt</tspan>

为了获得正确的单词换行，我尝试使用库进行连字符，例如hypher。它插入了软连字符（害羞），但这些不适用于由d3 / c3创建的SVG文本元素。

我尝试在可用空间结束之前找到最后一个害羞实体（或空格），以便手动插入一个新的tspan，其中所有文本都在换行符位置之后，但我找不到索引害羞实体。

$(element).html(); //returns the string without shy
element.innerHTML; //returns the string without shy; also true for outerHTML, textContent

所以我不能像其他问题中建议的那样使用indexOf（）或replace（）。我只能在记录tspan元素时看到软包装，而作为SVG元素，它不提供字符串方法。

SVG foreignObject似乎并不支持所有浏览器，去年，我们网站的大约20％的用户仍使用IE，因此该解决方案并不理想。

我是否忽略了在SVG元素中获得正确连字符的方法？还有另一种找到软包裹的方法吗？

这是我到目前为止所尝试的内容：

jQuery(function ($) {
        $('g.tick text tspan').hyphenate('de');
    });
    
    
d3.selectAll('.c3-axis-x .tick text tspan')
    .each(function(d,i){
        var lineLength = 60;
        var self = d3.select(this);
        console.log(this); //that's the only way I can see the soft wraps

        var esc = $(this).html().replace(/&shy;/g, /\u00AD/); //or any other replacement character
        $(this).html(esc);

        var break_chars = ["&shy;", " "]; //or /\u00AD/
        var wrap_pos = [];

        $(break_chars).each(function() {
            var start = 0;
            while (start !== -1) {
                var pos = text.indexOf(this, start);

                if (pos !== -1) {
                    start = pos+1;
                    wrap_pos.push(pos);
                } else {
                    start = -1
                }
            }
        });

    // find the last break_pos before the end of the line and create 
    // a new tspan with all the text following it

自动换行或在SVG中找到软连字符<text>

0 个答案: