Question

尝试使用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)] + ")"});

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

Answer 1

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

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

以下是完整的FIDDLE。

图表不会使用D3中的转换更新新数据

1 个答案: