在D3.js中换行文本标签,丢失文本对象的范围

时间:2015-04-15 18:39:09

标签: javascript oop d3.js

我有一个wordwraps长d3标签的功能。但是我的数据似乎没有正确传递。它使用一个简单的字符串,但是当我尝试从wrap()访问属性时它失败了。

我尝试了几种不同的变体。但似乎无法进入。

BubbleChart.prototype.show_labels = function(className, label_data) {
var that = this;

function wrap(text, width) {
    text.each(function() {
        wordwrap = (function(d) {
            return "This Works";
        });
        wordwrap2 = (function(d) {
            return d.text;
        }); //no joy Cannot read property 'text' of undefined
        var text = d3.select(this),
            words = wordwrap2().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
            .append("tspan")
            .attr("x", x)
            .attr("y", y)
            .attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                    .attr("x", x)
                    .attr("y", y)
                    .attr("dy", ++lineNumber * lineHeight + dy + "em")
                    .text(word);
            }
        }
    });
}

var labels = this.vis.select("g g")
    .selectAll("." + className)
    .data(label_data)
    .enter()
    .append("text")
    .attr("class", className + " " + this.options.default_label_class)
    .attr("dataIndex", function(d) {
        return d;
    })
    .attr("x", function(d) {
        return d.x * that.width;
    })
    .attr("y", function(d) {
        return d.y * that.height;
    }).call(wrap, 30);

/*.text(function (d) {
    return d.text;  //d.text works here, but needs to be called in the wrap function.
});*/

return labels;
};

0 个答案:

没有答案