Question

我有http://plnkr.co/edit/fZXbWTGH4qTP4E9LkKyw?p=preview，如果您将鼠标悬停在区域图表上，则应显示工具提示作为此处的跟进roi value in tooltip d3js area chart。

svg.append("path")
    .data([data])
    .attr("class", "area")
    .attr("d", area)
    .on("mouseover", function () {
        tooltip.style("display", null);
    })
    .on("mouseout", function () {
        tooltip.style("display", "none");
    })
    .on("mousemove", function (d) {
        var xPosition = d3.mouse(svg)[0] - 15;
        var yPosition = d3.mouse(svg)[1] - 25;
        tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
        var x0 = x.invert(d3.mouse(svg)[0]);
        var y0 = y.invert(d3.mouse(svg)[1]);
        tooltip.select("text").text(d3.time.format('%Y/%m/%d')(x0) + " " + Math.round(y0));
    });;

我将d3js图表包装在一个角度指令中，代码几乎相同，但是这个事件产生了这个错误的一些方法＆＃34; Uncaught TypeError：无法读取属性＆＃39; sourceEvent＆＃39; of null＆＃34;

Answer 1

问题是您将d3 javascript作为服务加载，并且在您正在加载它的代码中直接加载脚本如下：

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

在代码中你正在创建像这样的d3service：

angular.module('d3', [])
    .factory('d3Service', ['$document', '$q', '$rootScope',
    function ($document, $q, $rootScope) {
            var d = $q.defer();

            function onScriptLoad() {
                // Load client in the browser
                $rootScope.$apply(function () {
                    d.resolve(window.d3);
                });
            }
            // Create a script tag with d3 as the source
            // and call our onScriptLoad callback when it
            // has been loaded
            var scriptTag = $document[0].createElement('script');
            scriptTag.type = 'text/javascript';
            scriptTag.async = true;
            scriptTag.src = 'https://d3js.org/d3.v3.min.js';
            scriptTag.onreadystatechange = function () {
                if (this.readyState == 'complete') onScriptLoad();
            }
            scriptTag.onload = onScriptLoad;

            var s = $document[0].getElementsByTagName('body')[0];
            s.appendChild(scriptTag);

            return {
                d3: function () {
                    return d.promise;
                }
            };
}]);

两者都相同.. :)

2 d3加载的冲突是问题的根源，因此您无法在d3中获取鼠标事件。

所以修复是移除d3service并直接在你的代码中使用d3，它会起作用。

工作代码here

用于工具提示的d3.mouse事件的面积图的d3js angular指令

1 个答案: