Javascript 更新D3轴标签

我有三个单选按钮，用于更改d3线图x轴上的值。我已经成功地更改了刻度，但是没有更改x轴标签。无论我看哪里，我都只看到记号标签的信息，而不是轴标签（在gif“分钟”中）

我已经成功地使用下面的代码更新并因此重新缩放轴，但是我不知道如何更改标签

    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);

---

尝试以下操作：首先，为文本创建一个变量

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);

如果仍然出现“不是函数”错误，请更改用于附加svg的原始变量的

vis

---

编辑：别忘了将类“text”设置为文本。

正如Gerardo在评论中所建议的那样，在创建时给标签类“text”是缺少的链接

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

然后，我可以在更新功能中更改它，如下所示：

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

---

谢谢你，杰拉尔多

创建文本的

var

是什么？您只需执行

someVariable.text（“您的文本”）

。现在，您正在选择一个DOM元素。嘿，Gerardo，我将相应地更新我的问题。不幸的是，两者都不起作用：/JSFIDLE链接在这里！无法显示代码，但它将在浏览器窗口中工作。课文是否有“课文”类？“text”是svg文本元素，但是“.text”是一个类。试着设置一个类：

var xAxisLabel=vis.append（'text'）.attr（“class”，“text”）//代码的其余部分很好！我会编辑我的答案。如果你不介意，接受它-这就是我们向其他人展示解决方案的方式。