Question

我目前有一个基于此示例here

在D3V4中创建的堆积条形图

该图表是一个Ember组件，运行良好但我无法在数据更改时添加转换效果。目前，当数据更改时，图表会正确重绘，但我无法在两个州之间平稳过渡。

在图表构造中的任何位置添加transition（）项时，它会完全停止渲染或停止重绘图表。

图表由我的componentjs中的三个函数生成：

didInsertElement：

   didInsertElement() {
        this.buildChart()
        this.set('didRenderChart', true);
      },

didUpdateAttrs：

  didUpdateAttrs() {
    let svg = select(this.$('svg')[0])
        .selectAll("g")
        .remove()
    this.buildChart()
  },

和buildChart（只复制构造代码，解析工具提示和图例）

buildChart() {
    let data = this.get('data')

let series = stack()
      .keys(["count1", "count2", "count3"])
      .offset(stackOffsetDiverging)
      (data);

   let svg = select(this.$('svg')[0]),
      margin = {
        top: 20,
        right: 30,
        bottom: 30,
        left: 60
      },
      width = this.get("width"),
      height = this.get("height");

    let x = scaleBand()
      .domain(data.map(function(d) {
        return d.label;
      }))
      .rangeRound([margin.left, width - margin.right])
      .padding(0.1);

    let y = scaleLinear()
      .domain([min(series, stackMin), max(series, stackMax)])
      .rangeRound([height - margin.bottom, margin.top]);

    let z = scaleOrdinal().range(COLORS[this.get('color')]);

    svg.append("g")
      .selectAll("g")
      .data(series)
      .enter()
      // .merge(svg)
      .append("g")
      .attr("fill", function(d) {
        return z(d.key);
      })
      .selectAll("rect")
      .data(function(d) {
        return d;
      })
      .enter()
      .append("rect")
      .attr("width", x.bandwidth)
      .attr("x", function(d) {
        return x(d.data.label);
      })

      .attr("y", function(d) {
        return y(d[1]);
      })

      .attr("height", function(d) {
        return y(d[0]) - y(d[1]);
      })

    svg.append("g")
      .attr("transform", "translate(0," + y(0) + ")")
      .attr("class", "axisWhite")
      .call(axisBottom(x))

    svg.append("g")
      .attr("transform", "translate(" + margin.left + ",0)")
      .attr("class", "axisWhite")
      .call(axisLeft(y))


    function stackMin(h) {
      return min(h, function(d) {
        return d[0];
      });
    }

    function stackMax(h) {
      return max(h, function(d) {
        return d[1];
      });
    }

我认为无法过渡是因为首先没有正确创建图表（与附加到＆＃39; g＆＃39;的所有内容有关）但我无法确定哪些更改我需要纠正这个问题。

请注意，D3v4函数正在从ember add中导入到组件中，因此不需要d3.namespace。不幸的是，我无法在JSFiddle或Ember Twiddle中重新创建它

无法在数据刷新时转换D3v4堆积条形图

0 个答案: