无法在D3条形图中对'hoveredLabel'使用this.set()

时间:2018-02-01 13:52:05

标签: javascript d3.js ember.js

在我的Ember appliation中,我有一个D3 Stacked Bar Chart,我正在尝试设置'hoveredLabel'值,以便在我的工具提示代码中使用。悬停代码在这里:

  .on('mouseover', d => {
        this.set('hoveredLabel', d.data.label);
        this.set('hoveredCount', d.data.count1);
        console.log(d.data.label)
        console.log(hoveredLabel)
      })
      .on('mouseout', () => {
        this.set('hoveredLabel', null);
        this.set('hoveredCount', null);
      })

当我将鼠标悬停在栏上时,'d.data.label'的控制台日志会将正确的标签打印到控制台。 'hoveredLabel'控制台日志返回未定义的错误。我在另一个组件中使用此代码,我得到了所需的结果,所以我有点卡住了。

完整的方法链:

  svg.append("g")
    .selectAll("g")
    .data(series)
    .enter().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]); })
      .on('start', (data, index) => {
        if (index === 0) {
          (function updateTether() {
            Tether.position()
            rafId = requestAnimationFrame(updateTether);
          })();
        }
      })
      .on('end interrupt', (data, index) => {
        if (index === 0) {
          cancelAnimationFrame(rafId);
        }
      })
      .attr('opacity', d => {
        let selected = this.get('selectedLabel');

        return (selected && d.data.label !== selected) ? '0.5' : '1.0';
      })
      .on('mouseover', d => {
        this.set('hoveredLabel', d.data.label);
        this.set('hoveredCount', d.data.count1);
        console.log(d.data.label)
        console.log(hoveredLabel)
      })
      .on('mouseout', () => {
        this.set('hoveredLabel', null);
        this.set('hoveredCount', null);
      })
      .on('click', d => {
        let clickedLabel = d.data.label;
        let clickedCount = d.data.count1;
        // console.log(clickedLabel, clickedCount)

        if (this.get('on-click')) {
          this.get('on-click')(clickedLabel);
        } else {
          if (clickedLabel === this.get('selectedLabel')) {
            this.set('selectedLabel', '');
            this.set('selectedCount', '');
          } else {
            this.set('selectedLabel', clickedLabel);
            this.set('selectedCount', clickedCount);
          }

          this.buildChart()
        }
      });

1 个答案:

答案 0 :(得分:0)

如果要为ember组件设置属性'hoveredLabel',则应使用'get'来获取它们。我认为'this'是你的余烬组件?

尝试

                DisplayMetrics metrics = new DisplayMetrics();
                getWindowManager().getDefaultDisplay().getMetrics(metrics);

                int height = metrics.heightPixels;
                int width = metrics.widthPixels;
                WallpaperManager wallpaperManager = WallpaperManager.getInstance(AppMomentSelected.this);
                wallpaperManager.setWallpaperOffsetSteps(1, 1);
                wallpaperManager.suggestDesiredDimensions(width, height);

                Picasso.with(this)
                .load(imageBrought)
                .resize(width, height)
                .into(new Target() {
                 @Override
                  public void onBitmapLoaded (final Bitmap bitmap, Picasso.LoadedFrom from) {
                 /* Save the bitmap or do something with it here */
                 wallpaperManager.setBitmap(bitmap);
         }
    });