我刚认识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")更多推荐
发布评论