Javascript 图表未使用D3中具有转换的新数据更新

试图用D3做一个简单的替换数据/转换，但它没有更新。我没有收到错误，调试时也没有看到任何异常。我觉得我错过了一些非常简单的东西，只是忽略了。眼睛越多越好

这是我的D3代码：

var labels = ['Opens', 'Clicks', 'Unsubscribe'],
    data    = [4, 8, 15],
    chart,
    x,
    y,
    gap = 2,
    width = 450,
    leftWidth = 100,
    barHeight = 40,
    barHeightInner = (barHeight / 2),
    barTopMargin = (barHeight - barHeightInner) / 2,
    height = (barHeight + gap * 2) * labels.length + 30;

/*  SET SVG + LEFT MARGIN       */
chart = d3.select($("#graphArea")[0])
    .append('svg')
    .attr('class', 'chart')
    .attr('width', leftWidth + width + 20)
    .attr('height', height)
    .append("g")
    .attr("transform", "translate(10, 20");

x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);

y = d3.scale.ordinal()
    .domain(data)
    .rangeBands([0, (barHeight + 2 * gap) * labels.length], 0.05);

/* CREATE BARS  */
chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", leftWidth)
    .attr("y", y)
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr('class', 'bar-outer');

/* INNER BARS   */
chart.selectAll("rect.inner")
    .data(data)
    .enter().append("rect")
    .attr("x", leftWidth)
    .attr("y", function(d){return y(d) + barTopMargin} )
    .attr("width", function(d){return x(d)/2;})
    .attr("height", barHeightInner)
    .attr('class', 'bar-inner');



 /* SET NAMED LABELS    */
 chart.selectAll("text.label")
  .data(labels)
  .enter().append("text")
  .attr("x", leftWidth / 2 + 40)
.attr("y", function(d,i) {return i * y.rangeBand() + 20;})
  .attr("dy", ".35em")
  .attr("text-anchor", "end")
  .attr('class', 'label')
  .text(String);

function update(data) {

data =  [20, 10, 3];

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", leftWidth)
    .attr("y", y)
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr('class', 'bar-outer');

 chart.selectAll("rect")
    .data(data)
    .exit()
    .transition()
    .duration(300)
    .ease("exp")
    .attr('width', 0)
    .remove();

chart.selectAll("rect")
    .data(data)
    .transition()
    .duration(300)
    .ease("quad")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("transform", function(d,i) { return "translate(" + [0, y(i)] + ")"});

---

有点乱，对不起。。。但至少应该是可读的。我不知道为什么更新（数据）时它没有改变。任何建议都将不胜感激

主要问题在于输入/更新/退出模式的应用，以及忘记根据新数据重新设置尺度域。以下是感兴趣的部分：

function update() {
    data = [20, 10, 3];

    // must re-set scale domains with the new data
    x.domain([0, d3.max(data)]);
    y.domain(data);

    var outer = chart.selectAll(".bar-outer")
        .data(data);

    // exit selection
    outer
        .exit()
        .remove();

    // enter selection
    outer
      .enter()
      .append("rect")
        .attr('class', 'bar-outer');

    // update selection
    outer
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

    var inner = chart.selectAll(".bar-inner")
        .data(data);

    // exit selection
    inner
        .exit()
        .remove();

    // enter selection
    inner
      .enter()
      .append("rect")
        .attr('class', 'bar-inner');

    // update selection
    inner
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", function (d) {
            return y(d) + barTopMargin
        })
        .attr("width", function (d) {
            return x(d) / 2;
        })
        .attr("height", barHeightInner);
};

---

以下是完整的。

主要问题在于输入/更新/退出模式的应用，以及忘记根据新数据重新设置缩放域。以下是感兴趣的部分：

function update() {
    data = [20, 10, 3];

    // must re-set scale domains with the new data
    x.domain([0, d3.max(data)]);
    y.domain(data);

    var outer = chart.selectAll(".bar-outer")
        .data(data);

    // exit selection
    outer
        .exit()
        .remove();

    // enter selection
    outer
      .enter()
      .append("rect")
        .attr('class', 'bar-outer');

    // update selection
    outer
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

    var inner = chart.selectAll(".bar-inner")
        .data(data);

    // exit selection
    inner
        .exit()
        .remove();

    // enter selection
    inner
      .enter()
      .append("rect")
        .attr('class', 'bar-inner');

    // update selection
    inner
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", function (d) {
            return y(d) + barTopMargin
        })
        .attr("width", function (d) {
            return x(d) / 2;
        })
        .attr("height", barHeightInner);
};

---

以下是完整的。

主要问题在于输入/更新/退出模式的应用，以及忘记根据新数据重新设置缩放域。以下是感兴趣的部分：

function update() {
    data = [20, 10, 3];

    // must re-set scale domains with the new data
    x.domain([0, d3.max(data)]);
    y.domain(data);

    var outer = chart.selectAll(".bar-outer")
        .data(data);

    // exit selection
    outer
        .exit()
        .remove();

    // enter selection
    outer
      .enter()
      .append("rect")
        .attr('class', 'bar-outer');

    // update selection
    outer
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

    var inner = chart.selectAll(".bar-inner")
        .data(data);

    // exit selection
    inner
        .exit()
        .remove();

    // enter selection
    inner
      .enter()
      .append("rect")
        .attr('class', 'bar-inner');

    // update selection
    inner
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", function (d) {
            return y(d) + barTopMargin
        })
        .attr("width", function (d) {
            return x(d) / 2;
        })
        .attr("height", barHeightInner);
};

---

以下是完整的。

主要问题在于输入/更新/退出模式的应用，以及忘记根据新数据重新设置缩放域。以下是感兴趣的部分：

function update() {
    data = [20, 10, 3];

    // must re-set scale domains with the new data
    x.domain([0, d3.max(data)]);
    y.domain(data);

    var outer = chart.selectAll(".bar-outer")
        .data(data);

    // exit selection
    outer
        .exit()
        .remove();

    // enter selection
    outer
      .enter()
      .append("rect")
        .attr('class', 'bar-outer');

    // update selection
    outer
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

    var inner = chart.selectAll(".bar-inner")
        .data(data);

    // exit selection
    inner
        .exit()
        .remove();

    // enter selection
    inner
      .enter()
      .append("rect")
        .attr('class', 'bar-inner');

    // update selection
    inner
        .transition()
        .duration(500)
        .ease("quad")
        .attr("x", leftWidth)
        .attr("y", function (d) {
            return y(d) + barTopMargin
        })
        .attr("width", function (d) {
            return x(d) / 2;
        })
        .attr("height", barHeightInner);
};

---

这是完整的。

啊！该死的。如此接近。谢谢你的帮助！刚刚度过了我的夜晚！！我认为你不必重新申报那些没有变化的东西。太好了，很高兴能帮上忙。注意模式…用数据绑定选择捕获变量，然后用它来处理输入、更新和退出选择。啊！该死的。如此接近。谢谢你的帮助！刚刚度过了我的夜晚！！我认为你不必重新申报那些没有变化的东西。太好了，很高兴能帮上忙。注意模式…用数据绑定选择捕获变量，然后用它来处理输入、更新和退出选择。啊！该死的。如此接近。谢谢你的帮助！刚刚度过了我的夜晚！！我认为你不必重新申报那些没有变化的东西。太好了，很高兴能帮上忙。注意模式…用数据绑定选择捕获变量，然后用它来处理输入、更新和退出选择。啊！该死的。如此接近。谢谢你的帮助！刚刚度过了我的夜晚！！我认为你不必重新申报那些没有变化的东西。太好了，很高兴能帮上忙。注意模式…用数据绑定选择捕获变量，然后用它来处理输入、更新和退出选择。