Question

我的D3图表有一个Y轴，显示一些序数值。当数据更新，更改序数值列表时，我想转换到新的轴值。这样就可以了，除了显示每个＆＃39; tick＆＃39;轴需要换行以适合图表出现的网页。当我在调用轴时使用转换时，文本换行停止工作。

我的Y轴最初创建如下：

this.yAxisTaskTypeGroup = this.chartGroup
        .append("g")
        .attr("id", "yAxisTaskTypeGroup")
        .attr("class", "y-axis-tasktype")
        .attr("transform", "translate(0," + this.yAxisTaskTypeVerticalOffset + ")");

我的比例定义如下：

this.yScaleTaskType = d3
        .scaleOrdinal(this.yScaleTaskTypeRange)
        .domain(this.yScaleTaskTypeDomain);

我的Y轴定义如下：

this.yAxisTaskType = d3.axisLeft(this.yScaleTaskType)
        .tickSize(0);

更新Y轴刻度域和范围的值后，我按如下方式更新轴：

this.yAxisTaskTypeGroup
        .transition(this.timelineTransition) // apply a transition
        .call(this.yAxisTaskType)
        .selectAll(".tick text")
        .call(this.wrapText, this.margin.left, this.yAxisTaskTypeWrappedVerticalOffset);

wrapText结果如下：

wrapText(text, width, wrappedTextOffset) {

    text.each(function () {
        let text = d3.select(this),
            words = text.text().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(" "));
            let node: SVGTSpanElement = <SVGTSpanElement>tspan.node();
            let hasGreaterWidth = node.getComputedTextLength() > width;
            if (hasGreaterWidth) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                    .attr("x", x)
                    .attr("y", y)
                    .attr("dy", lineHeight + dy + "em")
                    .text(word);

                text.attr("y", wrappedTextOffset);
            };
        };

    });
};

如果我删除了转换，则文本仍会正确包装并正确更新。添加过渡后，文本换行不起作用，但值仍然更新。我想计算文本换行，然后将刻度转换到新位置。

有人可以解释我出错的地方吗？

调用函数时D3轴转换

0 个答案: