如何在nv.d3.js中调整工具提示距离

时间:2015-08-07 09:54:30

标签: javascript d3.js

我使用nv.d3.js创建了一个饼图。我已经为每个字段创建了一个工具提示。

<nvd3-pie-chart
    data="exampleData"
    id="exampleId"
    showLabels="true"
    labelType="value"
    x="xPieFunction()"
    y="yPieFunction()"
    donut="true"
    donutRatio=".5"
    tooltips="true"
    tooltipcontent="toolTipContentFunction()"
    color="pieColorFunction()"
    donutLabelsOutside="false">
    <svg height="200" style="margin-left: -100px; margin-top: -29px;"></svg>
</nvd3-pie-chart>

脚本:

$scope.exampleData = [
        {
            key: "Medium",
            y: 5
        },
        {
            key: "High",
            y: 1
        },
        {
            key: "Low",
            y: 1
        }
    ];

    $scope.toolTipContentFunction = function(){
        return function(key, x, y, e, graph) {
            return '<p>' + key +"-"+ y.value + '</p>'

        }
    }

    $scope.xPieFunction = function(){
        return function(d) {
            return d.key;
        };
    }
    $scope.yPieFunction = function(){
        return function(d) {
            return d.y;
        };
    }

问题是工具提示没有显示在饼图上,它显示鼠标悬停时与饼图的距离很远。如何根据鼠标悬停调整距离。

0 个答案:

没有答案