Question

我有以下d3.js脚本来创建条形图，工作正常。我添加了显示工具提示的功能（不确定我是否在正确的位置添加了它），这种方法很好但是它已经在现有的 mouseout 事件中产生了问题。

问题： 问题是以下代码不再起作用。当我鼠标悬停它不会变成灰色。

              .on('mouseout', function (d) {
              d3.select(this)
                .attr('fill', 'blue');

但是，如果我评论下面的行比上面的mouseout事件工作完美。

        .on('mouseover', tip.show)                  
        .on('mouseout', tip.hide)

完整脚本 var jsonData = @ Html.Raw（Json.Encode（Model））; data = jsonData; InitChart（）; 函数InitChart（）{

        var barData = data;

        var vis = d3.select('#SummaryChart'),
          WIDTH = 500,
          HEIGHT = 375,
          MARGINS = {
              top: 20,
              right: 20,
              bottom: 20,
              left: 150
          },
          xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
              return d.Date;
          })),


          yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
            d3.max(barData, function (d) {
                return d.Duration;
            })
          ]),

          xAxis = d3.svg.axis()
            .scale(xRange)
            .tickSize(0)
            .tickSubdivide(true),

          yAxis = d3.svg.axis()
            .scale(yRange)
            .tickSize(0)
            .orient("left")
            .tickSubdivide(true);

        var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
      return "<strong>Duration:</strong> <span style='color:red'>" + d.Duration + "</span>";
  })

        vis.call(tip);

        vis.append('svg:g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
          .call(xAxis);

        vis.append('svg:g')
          .attr('class', 'y axis')
          .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
          .call(yAxis);

        vis.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("font-size", "20px")
        .attr("x", WIDTH)
        .attr("y", HEIGHT + 20)
        .text("Time");

        vis.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("font-size", "20px")
        .attr("y", 100)
        .attr("x",-100)
        .attr("dy", ".75em")
        .attr("transform", "rotate(-90)")
        .text("Hours:");

        vis.selectAll('rect')
          .data(barData)
          .enter()
          .append('rect')
          .attr('x', function (d) {
              return xRange(d.Date);
          })
          .attr('y', function (d) {
              return yRange(d.Duration);
          })
          .attr('width', xRange.rangeBand())
          .attr('height', function (d) {
              return ((HEIGHT - MARGINS.bottom) - yRange(d.Duration));
          })

          .attr('fill', 'blue')
          .on('mouseover', function (d) {
              d3.select(this)
                .attr('fill', 'grey');
          })

          .on('mouseout', function (d) {
              d3.select(this)
                .attr('fill', 'blue');
          })
        .on('mouseover', tip.show)                  
        .on('mouseout', tip.hide)
    }
</script>

有人可以指出出了什么问题以及如何让它同时使用工具提示和鼠标一起变成灰色工作吗？

Answer 1

与jQuery不同，D3每次操作只允许一次回调。因此，如果您附加两个.on('mouseout')回调，则只会执行最后一个回调。参见：

＆＃13;

d3.select('div')
  .on('mouseout', function() {console.log('A')})
  .on('mouseout', function() {console.log('B')})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>

＆＃13;

你有两种解决方法。正如评论中所建议的那样，其中一个是在回调中同时调用attr和tooltip，如下所示：

.on('mouseout', function (d) {
  d3.select(this).attr('fill', 'blue');
  tip.hide();
}

第二种方法是使用点.表示法，如API第二段所述

如果事件侦听器已在所选元素上注册了相同类型，则在添加新侦听器之前将删除现有侦听器。要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的命名空间，例如＆＃34; click.foo＆＃34;和＆＃34; click.bar＆＃34;。

所以在你的情况下

.on('mouseout.attr', function (d) {
  d3.select(this)
    .attr('fill', 'blue');
})
.on('mouseout.tip', tip.hide)

工作示例：

＆＃13;

d3.select('div')
  .on('mouseout.logA', function() {console.log('A')})
  .on('mouseout.logB', function() {console.log('B')})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>

＆＃13;

d3.js条形图面临工具提示问题

1 个答案: