使用d3.mouse事件作为工具提示的面积图的d3js角度指令

Rohit Nandan 发表于 Dev

罗希特·南丹（Rohit Nandan）

我有这个http://plnkr.co/edit/fZXbWTGH4qTP4E9LkKyw?p=preview，如果您将鼠标悬停在面积图上，它应该已经在此处显示了工具提示，作为工具提示d3js区域图中从此处roi值的跟进。

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图表包装在有角度的指令中，代码几乎相同，但是有些事件如何生成此错误“ Uncaught TypeError：无法读取null的属性'sourceEvent'”

西里尔·谢里安（Cyril Cherian）

问题是您将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;
                }
            };
}]);