d3js 栏没有正确更新

网先生

我用工具提示创建了这个栏。我需要让他们更新后$('.quarter-increase, .quarter-decrease').on('click', function() {

我没有收到任何错误,但没有任何更新...

      $(document).ready(function() {

    $('#prof-rendi').click(function() {
      $('.graph-loading').show();
      $('#svg-quarter').empty();
      var tooltip = tooltipd3();

      var svg = d3.select("svg#svg-quarter"),
        margin = {
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;

      var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
        y = d3.scaleLinear().rangeRound([height, 0]);

      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var div = d3.select("#svg-quarter").append("div"). // declare the tooltip div
      attr("class", "tooltip"). // apply the 'tooltip' class
      style("opacity", 0);

      d3.csv(base_url() + 'graph/getStatementsQuarterly/', function(d) {
        $('.graph-loading').hide();
        d.guadagno = +d.guadagno;
        return d;
      }, function(error, data) {
        if (error) 
          throw error;

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

        g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));

        g.append("g").attr("class", "axis axis--y").call(d3.axisLeft(y).ticks(10)).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", "0.71em").attr("text-anchor", "end").text("Guadagno")

        g.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
          return x(d.periodo);
        }).attr("y", function(d) {
          return y(d.guadagno);
        }).attr("width", x.bandwidth()).attr("height", function(d) {
          return height - y(d.guadagno);
        }).on('mouseover', function(d) {
          var html = '<h5>' + d.guadagno + ' €</h5>';
          tooltip.mouseover(html); // pass html content
        }).on('mousemove', tooltip.mousemove).on('mouseout', tooltip.mouseout);
      });
    });

    $('.quarter-increase, .quarter-decrease').on('click', function() {
      $('.rendi-btn.left, .rendi-btn.right').attr('disabled', 'disabled');
      var where_at = $('#scroll-statement-quarter').val();
      $('.graph-loading').show();
      $('#svg-quarter').css({'opacity': 0.4});

      var tooltip = tooltipd3();

      var svg = d3.select("svg#svg-quarter"),
        margin = {
          top: 20,
          right: 20,
          bottom: 30,
          left: 40
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;

      var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
        y = d3.scaleLinear().rangeRound([height, 0]);

      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var div = d3.select("#svg-quarter").append("div"). // declare the tooltip div
      attr("class", "tooltip"). // apply the 'tooltip' class
      style("opacity", 0);

      var speed = 500;

      d3.csv(base_url() + 'graph/getStatementsQuarterly/' + where_at, function(d) {
        $('.graph-loading').hide();
        d.guadagno = +d.guadagno;
        return d;
      }, function(error, data) {
        if (error) 
          throw error;

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

        g.append("g").attr("class", "axis axis--x").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));

        g.append("g").attr("class", "axis axis--y").call(d3.axisLeft(y).ticks(10)).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", "0.71em").attr("text-anchor", "end").text("Guadagno")

        g.selectAll(".bar").data(data).transition().duration(speed).attr("class", "bar").attr("x", function(d) {
          return x(d.periodo);
        }).attr("y", function(d) {
          return y(d.guadagno);
        }).attr("width", x.bandwidth()).attr("height", function(d) {
          return height - y(d.guadagno);
        }).on('mouseover', function(d) {
          var html = '<h5>' + d.guadagno + ' €</h5>';
          tooltip.mouseover(html); // pass html content
        }).on('mousemove', tooltip.mousemove).on('mouseout', tooltip.mouseout);
      });
    })
  });

这是一个测试这个的Plunker:https ://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p = preview

按“显示”,然后将年份更改为 2016 年,您将看到结果。

杰拉尔多·费塔朵

g单击事件处理程序中的变量是新追加<group>要素。

因此,这...

g.selectAll(".bar").data(data).etc...

... 行不通,因为.bar该组内没有任何类

解决方案:使用svg变量选择矩形:

svg.selectAll(".bar").data(data).etc...

这是更新的 plunker:https ://plnkr.co/edit/eNa6Af0WcyrcLejadO2q ? p = preview

PS:这段代码有几个问题。我强烈建议您不要混合使用 jQuery 和 D3,也不要d3.csv在事件处理程序中使用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章