更新 D3 轴标签

Posted 2023-02-22

【中文标题】更新 D3 轴标签

【英文标题】：Updating D3 Axis Labels

【发布时间】：2016-08-10 23:34:26

【问题描述】：

我有三个单选按钮可以更改我的 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 是什么？你只需要做someVariable.text("your text")。现在，您正在选择一个 DOM 元素。

嘿 Gerardo，我会相应地更新我的问题。

【参考方案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);

如果您仍然收到“不是函数”错误，请将 vis 更改为用于附加 svg 的原始变量。

编辑：不要忘记将“文本”类设置为文本。

【讨论】：

不幸的是，两者都不起作用：/这里是 jsfiddle 链接！无法显示代码，但可以在浏览器窗口中使用。 jsfiddle.net/dane456/hf6prhah

文本是否有“文本”类？ "text" 是 svg 文本元素，但 ".text" 是一个类。

尝试设置类：var xAxisLabel = vis.append('text').attr("class", "text)//the rest of the code

好！我会编辑我的答案。如果您不介意，请接受 - 这就是我们向其他人展示解决方案有效的方式。

【参考方案2】：

正如 Gerardo 在 cmets 中所建议的，在创建时为标签赋予“文本”类是缺少的链接。

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

然后我可以在我的更新功能中更改它：

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

谢谢杰拉尔多！