D3:.transition()不处理事件

Question

我正忙着在Angular4中使用D3绘制条形图.

// Enter Phase
this.chart.selectAll('.bar')
  .data(this.barData)
  .enter()
  .append('rect')
  .attr('class', 'bar');

// Update Phase
let bars = this.chart.selectAll('.bar').transition()
  .attr('x', (d) => {return this.x(this.parseTime(d.date.toUpperCase()));})
  .attr('y', (d) => {return this.y(d.point)})
  .attr('width', 15)
  .attr('height', (d) => {return this.charDimensions.height - this.y(d.point);})
    .on("mouseover", function (d) {D3.select(this).style('opacity', 0.5);})
    .on("mouseout", function (d) {D3.select(this).style('opacity', 1);})
    .on("click", (d) => {this.barClicked.emit(d);});

// Exit phase
this.chart.selectAll('.bar')
  .data(this.barData)
  .exit().remove();

在我的绘图方法中,当我打电话时,animate()我得到一个错误:Error: unknown type: mouseover.这是有道理的,因为我可能试图调用on("<event>")D3返回的转换,转换效果就在那里,但是,转换后的所有内容都会中断,即:动画有效,但是绘图被打破了.

但是,当我尝试执行以下操作时:

// Update Phase
let bars = this.chart.selectAll('.bar');
bars.transition();
bars.attr('x', (d) => {return this.x(this.parseTime(d.date.toUpperCase()));})
  .attr('y', (d) => {return this.y(d.point)})
  .attr('width', 15)
  .attr('height', (d) => {return this.charDimensions.height - this.y(d.point);})
    .on("mouseover", function (d) {D3.select(this).style('opacity', 0.5);})
    .on("mouseout", function (d) {D3.select(this).style('opacity', 1);})
    .on("click", (d) => {this.barClicked.emit(d);});

没有错误发生,但没有任何反应,新数据集没有转换效果.

Answer 1

这里的问题是两个使用相同名称的不同方法之间的混淆:

• 选择 .on(typenames [,listener ])
• 转换 .on(typenames [,listener ])

由于你有转换选择,当你写...

.on(...

该方法期望看到三件事(或类型名称):

• "开始"
• "结束"
• "打断"

但是,"mouseover","mouseout"或"click"都不是.然后你得到你的错误......

> Uncaught Error: unknown type: mouseover

方案:

将事件侦听器绑定到常规选择.然后,在此之后,创建您的转换选择.

因此,在您的情况下,将所有on侦听器绑定到"enter"选项(顺便说一句,这更有意义),将它们从更新选择中删除.

看看这个小小的演示.首先,我创建一个常规的输入选择,我添加了事件监听器:

var bars = svg.selectAll(null)
    .data(data)
    .enter()
    .append("rect")
    //some attr here
    .on("mouseover", function(d) {
        console.log(d)
    });

然后,我添加过渡:

bars.transition()
    .duration(1000)
    etc...

将鼠标悬停在条形图上以查看"鼠标悬停"工作:

var svg = d3.select("svg");
var data = [30, 280, 40, 140, 210, 110];
var bars = svg.selectAll(null)
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("width", 0)
  .attr("y", function(d, i) {
    return i * 20
  })
  .attr("height", 18)
  .attr("fill", "teal")
  .on("mouseover", function(d) {
    console.log(d)
  });

bars.transition()
  .duration(1000)
  .attr("width", function(d) {
    return d
  })

.as-console-wrapper { max-height: 25% !important;}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>