没有触发techan.js mouseenter和mouseout事件的Javascript

Question

我不确定我是否搞砸了，有点像javascript的新手，我想要做的是在鼠标进入特定区域时显示一些文本并在它离开时隐藏它。您可以在this link找到我正在尝试做的完整工作示例。

不知怎的，我需要封装这段代码，我所做的就是下面的内容（无论如何，只是为了让你不浪费时间，这段代码几乎是从上面的链接复制粘贴，我只是把它封装成一个函数并改变了它消耗数据的方式）：

function candlestickChart(targetContainer, data) {
    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%d-%b-%y").parse,
        timeFormat = d3.time.format('%Y-%m-%d'),
        valueFormat = d3.format(',.2fs');

    var x = techan.scale.financetime()
            .range([0, width]);

    var y = d3.scale.linear()
            .range([height, 0]);

    var candlestick = techan.plot.candlestick()
            .xScale(x)
            .yScale(y);

    var trendline = techan.plot.trendline()
            .xScale(x)
            .yScale(y)
            .on("mouseenter", enter)
            .on("mouseout", out)
            .on("drag", drag);

    var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

    var svg = d3.select(targetContainer).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var valueText = svg.append('text')
            .style("text-anchor", "end")
            .attr("class", "coords")
            .attr("x", width - 5)
            .attr("y", 15);


    accessor = candlestick.accessor();
    data = data.slice(0, 3500).map(function (data) {
        return {
            date: new Date(data.date),
            open: +data.open,
            high: +data.high,
            low: +data.low,
            close: +data.close,
            volume: +data.volume
        }
    }).sort(function (a, b) { return d3.ascending(accessor.d(a), accessor.d(b)); });

       var trendlineData = [
            { start: { date: new Date(2014, 2, 11), value: 72.50 }, end: { date: new Date(2014, 5, 9), value: 63.34 } },
            { start: { date: new Date(2013, 10, 21), value: 43 }, end: { date: new Date(2014, 2, 17), value: 70.50 } }
        ];

        x.domain(data.map(accessor.d));
        y.domain(techan.scale.plot.ohlc(data, accessor).domain());

        svg.append("g")
                .datum(data)
                .attr("class", "candlestick")
                .call(candlestick);

        svg.append("g")
                .datum(trendlineData)
                .attr("class", "trendlines")
                .call(trendline)
                .call(trendline.drag);

        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

        svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Price ($)");

    function enter(d) {
        valueText.style("display", "inline");
        refreshText(d);
    }

    function out(d) {
        valueText.style("display", "none");
    }

    function drag(d) {
        refreshText(d);
    }

function refreshText(d) {
    valueText.text(
        "Start: [" + timeFormat(d.start.date) + ", " + valueFormat(d.start.value) +
        "] End: [" + timeFormat(d.end.date) + ", " + valueFormat(d.end.value) + "]"
    );
    }

}

这样做之后，mouseenter和mouseout事件就停止了，我错了吗？