javascript - D3 轴未更新

Question

我刚刚了解 D3 并尝试使用它绘制一些图表。我有一个条形图，x 轴是顺序的，y 轴是定量的。在调用 update_bar_chart 时，我希望 x 轴和 y 轴以及条形图相应更新。然而，虽然条形图正在更新，但 x 轴和 y 轴却没有更新。

这是代码:

function dbc_update_bar_chart(metric,sc) {
        data.length = 0;
        url = 'DBFetch.php/dbc_bar_chart/:'+metric+'/:'+sc
                    $.ajax({
                                    type:   'get',
                                    url:    url,
                                    success: function(jdata, status, jqXHR) {
                                        data = JSON.parse(jdata)
                                        //console.log(data)
                                        bar_chart.setSeries(data)
                                        bar_chart.x(d3.scale.ordinal().rangeRoundBands([0, (width - margins.left - margins.right)]).domain(data.map(function(d) {return d[0];})))
                                                   .y(d3.scale.linear().range([(height - margins.top - margins.bottom), 0]).domain([0,d3.max(data, function(d) {return d[1]; })]));                             
                                        renderAxes(_svg);
                                    }
                    })
}

    function renderAxes(svg) {
        xAxis = d3.svg.axis()
                            .scale(_x)
                            .orient("bottom");

        yAxis = d3.svg.axis()
                            .scale(_y)
                            .orient("left");
        if (!axesG) {
            console.log("Entered init axes")
            axesG = svg.append("g")
                    .attr("class", "bar_axes");

            axesG.append("g")
                    .attr("class", "bar_xaxis")
                    .attr("transform", function () {
                        return "translate(" + xStart() + "," + yStart() + ")";
                    })
                    .call(xAxis);

            axesG.append("g")
                    .attr("class", "bar_yaxis")
                    .attr("transform", function () {
                        return "translate(" + xStart() + "," + yEnd() + ")";
                    })
                    .call(yAxis);
        }
        else{
            console.log("Entered update axes")
            svg.selectAll(".bar_axes bar_xaxis").transition()
                .duration(750)
                .call(xAxis);

            console.log("updated x-axes")
            svg.selectAll(".bar_axes bar_yaxis").transition()
                    .duration(750)
                    .call(yAxis);
            console.log("updated y-axes")        
        }
    }

Answer 1

现有轴的选择器是错误的。如果你想显式指定父元素和子元素，它们应该是

svg.selectAll(".bar_axes > .bar_xaxis")
svg.selectAll(".bar_axes > .bar_yaxis")

但是，您也可以直接选择元素:

svg.selectAll(".bar_xaxis")
svg.selectAll(".bar_yaxis")