2

我在我的图表上附加了缩放功能，它工作正常。

当我将鼠标悬停事件附加到图表中的项目（矩形）时，鼠标悬停会触发，但不会调用缩放。

我试图让鼠标悬停使工具提示出现，并且“鼠标单击并拖动”使图表仅在 y 轴上平移。

有没有一种简单的方法可以让它们一起工作，或者我应该像这个例子一样自定义事件？

http://bl.ocks.org/stepheneb/1182434

bar = g.selectAll(".bar")
            .data(currentData)
            .enter().append('rect')
            .attr("class", "horizontal bar")
            .attr("x", 0)

        .attr("height", ordinalScale.rangeBand())
            .attr("y", function(d) {
            return ordinalScale(d.key);
        })
            .attr("width", 0)
            .on("mouseover", function(d) {

            tooltip = d3.select("body").append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);


            tooltip.style("left", (d3.event.pageX - 80) + "px")
                .style("top", (d3.event.pageY) + "px")
                .append('p')
                .text(d.key)
                .attr('class', 'tootip-key')
                .append('p')
                .text(d.value)
                .attr('class', 'tooltip-value');

            tooltip.transition()
                .duration(200)
                .style("opacity", 0.9);

        })

            .on("mouseout", function(d) {

            tooltip.remove();


        });

并且缩放行为是这样附加的。

g.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .attr("pointer-events", "all")
        .call(d3.behavior.zoom().on("zoom", zoom));

谢谢！

4

1 回答 1

-3

获取工具提示的最简单方法是将元素附加svg:title到您想要具有工具提示的元素。其余的将由浏览器处理。如果您需要更高级的东西，请查看Tipsy。

要将平移限制在 y 轴，只需忽略x处理程序函数中值的转换（zoom在您的情况下）。

于 2013-04-16T18:49:00.777 回答