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

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

T0.DocDate >= '20160101' AND T0.DocDate < '20170101'

然后，更新后：

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选项），您只需尝试这个，因为您选择了一个DOM元素：

transition()

如果你仍然得到一个＆＃34;不是一个功能＆＃34;错误，更改用于附加svg的原始变量的vis.select('.text')[0][0] .duration(750) .textContent = (xAxisLabel);。

编辑：不要忘记设置课程＆＃34; text＆＃34;到文本。

Answer 2

正如Gerardo在评论中所建议的，在创建时给标签提供“文本”类是缺失的链接。

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

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

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

谢谢Gerardo！

更新D3轴标签

2 个答案: