如何使用d3.js更新轴
我试图在图表上显示不同的数据。 用户可以单击单选button来更改显示的数据。 我正在使用“气泡图”来呈现数据。
对于每种types的数据，我需要更新Yaxis（域是不同的）。 这是我现在所做的：
图表初始化
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(dh);}) .attr("cy", function(d,i) {return y(dv);}) .attr("r", function(d,i) {return r(Math.sqrt(dv));}) .style("fill", function(d,i) {return color(dv);}) .style("opacity", function(d,i) {return o(dv);}) .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(dv);}).attr("stroke-width", 0);}) .append("title") .text(function(d) { return d.v+' '+ d.t+' (adjusted) - '+ dd }) .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
马克西姆
看起来您在更新轴时使用了错误的select器：
svg.selectAll("g .y.axis") .call(yAxis); svg.selectAll("g .x.axis") .call(xAxis);
也许应该阅读：
svg.selectAll("gyaxis") .call(yAxis); svg.selectAll("gxaxis") .call(xAxis);
你为什么使用“g.y.axis”？
尝试：
svg.select(".y.axis") .call(yAxis);
和x轴类似。
