d3js使用提示d3.mouse事件面积图角指令 [英] d3js angular directive for area chart using d3.mouse event for tooltip

问题描述

我有这个 http://plnkr.co/edit/fZXbWTGH4qTP4E9LkKyw?p= preVIEW ：如果你将鼠标悬停在区域图它应该显示的提示从这里<一个跟进href=\"http://stackoverflow.com/questions/34445102/roi-value-in-tooltip-d3js-area-chart/34445937#34445937\">roi在提示值d3js面积图。

I have this http://plnkr.co/edit/fZXbWTGH4qTP4E9LkKyw?p=preview where if you hover over the area chart it should have shown the tooltip as the follow up from here 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图表中的角度指令，code几乎是相同的，但这一事件被一些如何产生这个错误未捕获类型错误：无法读取空的特性sourceEvent的'。

I'm wrapping the d3js chart in a angular directive, code is almost the same but some how this event is generating this error "Uncaught TypeError: Cannot read property 'sourceEvent' of null"

推荐答案

的问题是，你加载D3 JavaScript作为一种服务，并在code你加载它直接剧本是这样的：

The problem is that you loading d3 javascript as a service and in the code you are loading it directly script like this:

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

而在code要创建d3service是这样的：

And in the code you are creating d3service like this:

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;
                }
            };
}]);

那么都是一样的..：）

Well both are same..:)

加载的冲突2 D3是问题的根源，你这样，你不能够在D3中获得鼠标事件。

The 2 d3 loaded conflicts is the root of the problem and you thus you are not able to get the mouse event in d3.

所以，解决方法是删除d3service并使用D3直接在code，它会正常工作。

So the fix is remove d3service and use d3 directly in your code and it will work.

工作code 这里

这篇关于d3js使用提示d3.mouse事件面积图角指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！