更新 D3 轴标签

Question

我有三个单选按钮可以更改我的 d3 折线图的 x 轴上的值。我已经成功地能够改变比例，但不是 x 轴标签。我到处都看到了刻度标签的信息，而不是轴标签（在 gif "Minute" 中）。

我已经能够像下面的代码一样成功地更新并重新缩放坐标轴，但是不知道如何更改标签。

    function updateGraph(graphData, timeScale){

    yDomain = d3.extent(graphData, function(d){return Number(d.amt)});

    switch(timeScale) {
        case 'min':
            xDomain = d3.extent(graphData, function(d){return Number(d.min)});
            break;
        case 'hour':
            xDomain = d3.extent(graphData, function(d){return Number(d.hour)});
            break;
        case 'day':
            xDomain = d3.extent(graphData, function(d){return Number(d.day)});
            break;
        default: break;

    }

    //Make the scale for the graphs dynamic
    yScale.domain(yDomain);

    xScale.domain(xDomain);

    vis = d3.select('#visualisation').transition();
    //add axes with proper scale, orientation, and position 

    var line = d3.svg.line()
    .x(function(d){

        switch(timeScale) {
            case 'min':
                return xScale(d.min);
                break;
            case 'hour':
                return xScale(d.hour);
                break;
            case 'day':
                return xScale(d.day);
                break;
            default: break;

        }

    })
    .y(function(d){
        return yScale(d.amt);
    })
    .interpolate('basis');

    var xAxisLabel = function(){
        switch(timeScale) {
            case 'min':
                return 'Minute';
                break;
            case 'hour':
                return 'Hours';
                break;
            case 'day':
                return 'Day';
                break;
            default: break;

        }
    }

    vis.select('.line')
        .duration(750)
        .attr('d', line(graphData))
    vis.select('.xaxis')
        .duration(750)
        .call(xAxis);
    vis.select('.yaxis')
        .duration(750)
        .call(yAxis);
    //Tried to hardcode with 'sugar' to no avail, would eventually like to use xAxisLabel declared above.
    vis.select('.text')
        .duration(750)
        .text('sugar');
}

我第一次做图的时候设置了文字，代码如下：

 vis.append('text')
        .attr('text-anchor', 'middle')  // this makes it easy to centre the text as the transform is applied to the anchor
        .attr('transform', 'translate('+ (WIDTH/2) +','+(HEIGHT+(MARGINS.bottom/3))+')')  // centre below axis
        .text(xAxisLabel);

Answer 1

试试这个：首先，为您的文本创建一个变量。

var textLabel = vis.append("text")
   .attr('text-anchor', 'middle')  // this makes it easy to centre the text as the transform is applied to the anchor
    .attr('transform', 'translate('+ (WIDTH/2) +','+(HEIGHT+(MARGINS.bottom/3))+')')  // centre below axis
    .text(xAxisLabel);

然后，更新后：

textLabel.duration(750).text(xAxisLabel)

或者，如果上述解决方案不起作用（因为 vis 是 transition() 选择），您可以简单地尝试这个，因为您选择的是 DOM 元素:

vis.select('.text')[0][0]
    .duration(750)
    .textContent = (xAxisLabel);

如果您仍然收到 "is not a function" 错误，请更改 vis 用于附加 svg 的原始变量。

编辑：不要忘记将 class "text" 设置为文本。

Answer 2

正如 Gerardo 在评论中所建议的那样，在创建时给标签 class 'text' 是缺少的 link.

var xAxisLabel = vis.append('text').attr("class", "text")//the rest of the code

然后我可以在我的更新函数中这样更改它：

    vis.select('.text')
    .duration(750)
    .text(xAxisLabel);

谢谢杰拉尔多！

更新 D3 轴标签

Updating D3 Axis Labels

javascript

svg

linegraph

d3.js