如何使用d3.js更新轴 [英] How to update axis using d3.js

问题描述

我想在图表上显示不同的资料。用户可以点击单选按钮来改变显示的数据。我使用气泡图来渲染数据。

I'm trying to display different data on a graph. The user can change the displayed data clicking on a radio button. I'm using a "Bubble chart" to render the data.

对于每种类型的数据，我需要更新Yaxis（域是不同的）。
这是我现在做的：

For each type of data I need to update the Yaxis (the domain is different). Here is what I've done for now:

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

初始化轴

Initialise the Axis

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

更新图表

Update the chart

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

圆圈正确更新（转换不工作）不改变，我不明白为什么。我有点失落，我看了很多例子，但我看不到我做错了。

The circles are updated correctly (transitions are not working tho) but the axis are not changing and I can't see why. I'm a bit lost, I've looked at many example but I cannot see what I'm doing wrong.

我使用d3.js版本：v3 .1.10

I'm using d3.js version: v3.1.10

Maxime

推荐答案

看起来您正在使用更新轴时出错选择器：

It looks like you are using the wrong selector while updating the axes:

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

这篇关于如何使用d3.js更新轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！