d3js图形保留在新的数据

Question

这里刷新旧轴的数据是我的问题

每次的图片尝试刷新我用新的数据d3js图，其X轴和Y轴被搞砸既旧轴和新轴。在y轴上的图像3,2.5,2,1.5 ....是我的旧轴和800,700,600 .....是我的新轴。类似于x轴 任何人都可以告诉我笏我做错了。我只想要新的轴显示出来。 这是我的d3js代码。

function ShowGraph(data) { 

var vis = d3.select("#visualisation"), 
    WIDTH = 500, 
    HEIGHT = 500, 
    MARGINS = { 
     top: 20, 
     right: 20, 
     bottom: 20, 
     left: 30 
    }, 
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function (d) { 
     return d.year; 
    }), 
    d3.max(data, function (d) { 
     return d.year; 
    })]), 
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function (d) { 
     return d.count; 
    }), 
    d3.max(data, function (d) { 
     return d.count; 
    })]), 
    xAxis = d3.svg.axis() // generate an axis 
    .scale(xRange) // set the range of the axis 
    .tickSize(5) // height of the ticks 
    .tickSubdivide(true), // display ticks between text labels 
    yAxis = d3.svg.axis() // generate an axis 
    .scale(yRange) // set the range of the axis 
    .tickSize(5) // width of the ticks 
    .orient("left") // have the text labels on the left hand side 
    .tickSubdivide(true); // display ticks between text labels 
var transition = vis.transition().duration(1000).ease("exp-in-out"); 

transition.select(".x.axis").call(xAxis); 
transition.select(".y.axis").call(yAxis); 




vis.append("svg:g") // add a container for the axis 
.attr("class", "x axis") // add some classes so we can style it 
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position 
.call(xAxis); // finally, add the axis to the visualisation 

vis.append("svg:g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis); 


var circles = vis.selectAll("circle").data(data) 
circles.enter() 
    .append("svg:circle") 
    .attr("cx", function (d) { 
    return xRange(d.year); 
}) 
    .attr("cy", function (d) { 
    return yRange(d.count); 
}) 
    .style("fill", "red") 

circles.transition().duration(1000) 
    .attr("cx", function (d) { 
    return xRange(d.year); 
}) 
    .attr("cy", function (d) { 
    return yRange(d.count); 
}) 
    .attr("r", 10) 

circles.exit() 
    .transition().duration(1000) 
    .attr("r", 10) 
    .remove(); 

}

下面是它看看。 link与Word尝试“了，而且，我，还有，”每次一个

Answer 1

试试空轴之前建立图

function ShowGraph(data) { 
    d3.selectAll('.axis').remove(); 
    var vis = d3.select("#visualisation"), 
    //... 

编辑 OK，也许我找到了解决办法

问题是每次追加调用函数的轴。

所以，如果你添加一个检查，像这样：

var hasAxis = vis.select('.axis')[0][0]; 

if(!hasAxis) { 
    vis.append("svg:g") // add a container for the axis 
    .attr("class", "x axis") // add some classes so we can style it 
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position 
    .call(xAxis); // finally, add the axis to the visualisation 


    vis.append("svg:g") 
    .attr("class", "y axis") 
    .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
    .call(yAxis); 
} 

它应该工作