D3.js d3js条未正确更新

我用工具提示创建了这个栏。我需要在（'click'，function（）{/code>

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

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

$（文档）.ready（函数（）{
$（#prof rendi'）。单击（函数（）{
$（'.graph load'）.show（）；
$（'#svg quarter'）.empty（）；
var tooltip=tooltipd3（）；
var svg=d3。选择（“svg#svg季度”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.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”）。//声明工具提示div
属性（“类”、“工具提示”）。//应用“工具提示”类
样式（“不透明度”，0）；
d3.csv（base_url（）+'graph/getstatementsquartery/'，函数（d）{
$（'.graph load'）.hide（）；
d、 瓜达格诺=+d.瓜达格诺；
返回d；
}，函数（错误，数据）{
如果（错误）
投掷误差；
x、 域（data.map）（函数（d）{
返回d.periodo；
}));
y、 领域([
0,
d3.最大值（数据、函数（d）{
返回d.guadagno；
})
]);
g、 追加（“g”）.attr（“类”、“轴轴--x”）.attr（“变换”、“平移（0，+height+））））。调用（d3.axisBottom（x））；
g、 附加（“g”）.attr（“类”，“轴-轴”-y”）.call（d3.axisLeft（y）.ticks（10））.append（“文本”）.attr（“变换”，“旋转（-90）”））.attr（“y”，6.attr（“dy”，“0.71em”）.attr（“文本锚定”，“结束”）.text（“Guadagno”）
g、 选择All（“.bar”）.data（data）。enter（）.append（“rect”）.attr（“class”，“bar”）.attr（“x”，函数（d）{
返回x（d.periodo）；
}).attr（“y”，函数（d）{
返回y（d.guadagno）；
}).attr（“宽度”，x.bandwidth（））.attr（“高度”，函数（d）{
返回高度-y（d.guadagno）；
}).on（'mouseover'，函数（d）{
var html=''+d.guadagno+'€'；
mouseover（html）；//传递html内容
}).on（'mousemove'，tooltip.mousemove）.on（'mouseout'，tooltip.mouseout）；
});
});
$（'季度增加，'季度减少'）。在（'单击'，函数（）上）{
$（'.rendi-btn.left、.rendi-btn.right'）.attr（'disabled'，'disabled'）；
var，其中_at=$（“#滚动语句季度”）.val（）；
$（'.graph load'）.show（）；
$（'svg quarter'）.css（{'opacity'：0.4}）；
var tooltip=tooltipd3（）；
var svg=d3。选择（“svg#svg季度”），
保证金={
前20名，
右:20,，
底数：30，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom；
var x=d3.scaleBand（）.rangeRound（[0，宽度]）.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”）。//声明工具提示div
属性（“类”、“工具提示”）。//应用“工具提示”类
样式（“不透明度”，0）；
无功转速=500；
d3.csv（base_url（）+'graph/getstatementsquartery/'+where_at，函数（d）{
$（'.graph load'）.hide（）；
d、 瓜达格诺=+d.瓜达格诺；
返回d；
}，函数（错误，数据）{
如果（错误）
投掷误差；
x、 域（data.map）（函数（d）{
返回d.periodo；
}));
y、 领域([
0,
d3.最大值（数据、函数（d）{
返回d.guadagno；
})
]);
g、 追加（“g”）.attr（“类”、“轴轴--x”）.attr（“变换”、“平移（0，+height+））））。调用（d3.axisBottom（x））；
g、 附加（“g”）.attr（“类”，“轴-轴”-y”）.call（d3.axisLeft（y）.ticks（10））.append（“文本”）.attr（“变换”，“旋转（-90）”））.attr（“y”，6.attr（“dy”，“0.71em”）.attr（“文本锚定”，“结束”）.text（“Guadagno”）
g、 选择all（“.bar”）.data（data）.transition（）.duration（speed）.attr（“class”，“bar”）.attr（“x”），function（d）{
返回x（d.periodo）；
}).attr（“y”，函数（d）{
返回y（d.guadagno）；
}).attr（“宽度”，x.bandwidth（））.attr（“高度”，函数（d）{
返回高度-y（d.guadagno）；
}).on（'mouseover'，函数（d）{
var html=''+d.guadagno+'€'；
mouseover（html）；//传递html内容
}).on（'mousemove'，tooltip.mousemove）.on（'mouseout'，tooltip.mouseout）；
});
})
});

这是一个用来测试这一点的Plunker：

---

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

单击事件处理程序中的

g

变量是新添加的

元素

因此，这

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

…不起作用，因为该组中没有类

.bar

解决方案：使用

svg

变量选择矩形：

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

以下是更新的plunker：

---

PS：这段代码有几个问题。我强烈建议你不要混合使用jQuery和D3，也不要在事件处理程序中使用

D3.csv

。

@GerardoFurtado ok修复了缩进。现在，jQuery是我唯一的机会。csv是异步的，是的，但它确实有效（更改y值，但不更新条形图）好的，在这种情况下，最好的办法是用这些代码和相应的CSV创建一个plunker/jsfiddle/codepen/任何东西。@GerardoFurtado你是对的。我放置了一个plunker，请查看我的更新。：）这是一个很好的建议。Tks。如果使用纯JS调用不同的csv，您会怎么做？比例仍然存在问题，条形图只更新一次（如果您