d3.js - 如何使用 d3.js 更新轴

Question

我正在尝试在图表上显示不同的数据。用户可以单击单选按钮来更改显示的数据。我使用“气泡图”来呈现数据。

对于每种类型的数据，我需要更新 Y 轴(域不同)。这是我现在所做的:

图表初始化

var svg = d3.select("body .main-content").append("svg")
    .attr("class", "chart")
    .attr("width", width)
    .attr("height", height);

初始化轴

initAxis();
function initAxis()
{
    var y = d3.scale.linear().domain([0,1000]).range([height-margin, margin]).nice(),
        x = d3.scale.linear().domain([0,23]).range([margin,width-margin]),
        yAxis = d3.svg.axis().scale(y).orient("left"),
        xAxis = d3.svg.axis().scale(x).orient("bottom");

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin + ",0)")
        .call(yAxis);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - margin) + ")")
        .call(xAxis);
}

更新图表

    function update(type)
    {
        // Get the data
        type = type || 'default';
        var m = max[type],
            mi = min[type]+0.1,
            data = dataset[type],
            step = stp[type];

        // Set the functions
        var y = d3.scale.linear().domain([mi,m]).range([height-margin, margin]).nice();
        var o = d3.scale.linear().domain([0,m]).range([.5,1]);
        var r = d3.scale.linear().domain([0,Math.sqrt(m)]).range([0,30]);
        var x = d3.scale.linear().domain([0,23]).range([margin,width-margin]);
        var color = function (a, b) {
            for (var c = (a - 0) / (m - 0), d = [], e = 0; 3 > e; e++) d.push(Math.round(K[0][e] +
                    c * (K[1][e] - K[0][e])));
            d.push(b || 0.7);
            return "rgba(" + d.join(",") + ")"
        }

        //Attach the data to the graph
        var circle = svg.selectAll("circle").data(data);

        // Update existing element
        circle.attr("class", "update");

        // Add new element
        circle.enter()
            .append("circle")
            .attr("class", "enter")
            .attr("stroke-width", 0)
            .attr("stroke", "black")
                .transition()
                .duration(750)
                .attr("y", 0)
                .style("fill-opacity", 1);

        // Apply attribute to new and updated element
        circle.attr("cx", function(d,i) {return x(d.h);})
            .attr("cy", function(d,i) {return y(d.v);})
            .attr("r", function(d,i) {return r(Math.sqrt(d.v));})
            .style("fill", function(d,i) {return color(d.v);})
            .style("opacity", function(d,i) {return o(d.v);})
            .on("click", function(d,i){window.open(d.name,'_blank');})
            .on("mouseover", function(d,i){d3.select(this).style("fill", "red").attr("stroke-width", 1);})
            .on("mouseout", function(d,i){d3.select(this).style("fill", function(d,i) {return color(d.v);}).attr("stroke-width", 0);})
            .append("title")
            .text(function(d) { return d.v+' '+ d.t+' (adjusted) - '+ d.d })
                .transition()
                .duration(750)
                .attr("y", 0)
                .style("fill-opacity", 1);

        // Remove old elements
        circle.exit()
            .attr("class", "exit")
            .transition(750)
            .ease("linear")
            .attr("cy", 0)
            .style("opacity", 0.2)
            .remove();

        // Update the Axis
        var xAxis = d3.svg.axis().scale(x).orient("bottom");
        var yAxis = d3.svg.axis().scale(y).orient("left");

        svg.selectAll("g .y.axis")
            .call(yAxis)

        svg.selectAll("g .x.axis")
            .call(xAxis);
    }

圆圈已正确更新(过渡不起作用)，但轴没有变化，我不明白为什么。我有点迷失，我看了很多例子，但我看不出我做错了什么。

我使用的是 d3.js 版本:v3.1.10

马克西姆

Answer 1

您在更新轴时似乎使用了错误的选择器:

   svg.selectAll("g .y.axis")
        .call(yAxis);

   svg.selectAll("g .x.axis")
        .call(xAxis);

也许应该阅读:

   svg.selectAll("g.y.axis")
        .call(yAxis);

   svg.selectAll("g.x.axis")
        .call(xAxis);