D3轴未更新(D3 axis not getting updated)

D3轴未更新(D3 axis not getting updated)

我刚认识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") } }

I just got to know D3 and was trying some graphs using it. I have a bar chart, the x axis is ordinal and the y axis is quantitative. On calling update_bar_chart, I want the x and y axis and the bars to be updated accordingly. However, although the bars are getting updated , the x and y axis are not.

Here is the code:

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

最满意答案

您现有轴的选择器是错误的。 如果要明确指定父元素和子元素，它们应该是

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

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

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

Your selectors for the existing axes are wrong. If you want to specify parent and child elements explicitly, they should be

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

However, you can also select the elements directly:

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