d3js酒吧无法正确更新 [英] d3js bars not updating properly

问题描述

我使用工具提示创建了这些栏.我需要在$('.quarter-increase, .quarter-decrease').on('click', function() {

I created this bars with a tooltip. I need to get them update after the $('.quarter-increase, .quarter-decrease').on('click', function() {

我没有任何错误，但没有任何更新...

I don't get any errors but nothing gets updated...

      $(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);
      });
    })
  });

这是一个测试该产品的工具: https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview

This is a Plunker to test this: https://plnkr.co/edit/72GCWqkllMFXZI6mecQE?p=preview

按显示"，然后将年份更改为2016，您将看到结果.

Press "show", then change the year to 2016 and you will see the result.

推荐答案

click事件处理程序中的g变量是新添加的<group>元素.

Your g variable inside the click event handler is a newly appended <group> element.

因此，这个...

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

...不起作用，因为该组中没有任何类.bar.

... won't work, because there is nothing with a class .bar inside that group.

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

Solution: use the svg variable to select the rectangles:

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

以下是更新的插件: https://plnkr.co/edit/eNa6Af0WcyrcLejadO2q?p =预览

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

PS: this code has several problems. I strongly advise you to not mix jQuery and D3, and also to not use d3.csv inside an event handler.

这篇关于d3js酒吧无法正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！