Question

我正在尝试从json数据集动态更新我的条形图。

数据看起来像这样：

[{X = A，Y = 1}，{X = B，Y = 2}，{X = C，Y = 4}]，
[{X = d，Y = 0.1}，{X = A，Y = 1}]，{X = B，Y = 4}]

我使用代码设置画布的尺寸（y轴和x轴）：

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

整个代码：

    // set the ranges
    var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

    var y = d3.scale.linear().range([height, 0]);

    // define the axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")


    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(10);


    // add the SVG element
    var chart = d3.select(".chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");






    // load the data
        data=mydata

        data.forEach(function(d) {
            d.x = d.x;
            d.y = +d.y;
        });

      // scale the range of the data
      x.domain(data.map(function(d) { return d.x; }));
      y.domain([0, d3.max(data, function(d) { return d.y; })]);

      // add axis
      chart.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
        .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );

      chart.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 5)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Frequency");


      // Add bar chart
      chart.selectAll("bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.x); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.y); })
          .attr("height", function(d) { return height - y(d.y); });


     //Call function to update barchart
      function redraw(data){


          x.domain(data.map(function(d) { return d.x; }));
          y.domain([0, d3.max(data, function(d) { return d.y; })]);

          chart.select(".x.axis").remove();
        chart.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis)
        .selectAll("text")
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", "-.55em")
          .attr("transform", "rotate(-90)" );



            // y-axis
            chart.select(".y.axis").remove();
            chart.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Frequency");





            var bar = chart.selectAll(".bar")
                    .data(data, function(d) { 

                        return d.x; });

            // new data:
            bar.enter().append("rect")
               .attr("class", "bar")
               .attr("x", function(d) { return x(d.x); })
               .attr("y", function(d) { return y(d.y); })
               .attr("height", function(d) { return height - y(d.y); })
               .attr("width", x.rangeBand());


            // removed data:
           // bar.exit().remove();
            chart.select(".y.axis").transition().delay(750).call(yAxis)

            // updated data:
            bar
               .transition()
               .duration(750)
                   .attr("y", function(d) { return y(d.y); })
                   .attr("height", function(d) { return height - y(d.y); });
      }

Answer 1

在这种情况下，您必须重新定义xAxis和yAxis以使用您在函数中定义的新缩放值，方法是将声明复制到函数作用域中。

// define the axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

您在轴上获取旧值的主要原因是，当您拨打＆＃34; .call（xAxis）＆＃34;在函数内部，与该轴声明关联的x标度是原始的。

希望这会有所帮助..

D3条形图不能正确地动态更新y轴和x轴

1 个答案: