Question

我正在介绍javascript，我正在尝试使用.on("mouseovert", ...)，以便在光标位于图表上时获取图表的x值。

我的代码如下：

// do something as mouseover the graph
svg.select("svg")
    .on("mouseover", alert("mouse on graph"));

结果是：当我打开html文件（并加载我的js脚本）时会出现一个警告，但没有任何事情发生，因为它悬停在图表上。

脚本中的其他所有内容都可以正常工作。

你知道为什么吗？

非常感谢你抽出的时间！

以下是完整的脚本：

function draw_co2(url) {
    d3.select("svg").remove() //remove the old graph
    // set the dimensions and margins of the graph
    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    // parse the date / time
    var parseTime = d3.timeParse("%Y-%m-%d");

    // Get the data
    d3.json(url, function (error, data) {
        if (error)
            throw ('There was an error while getting geoData: ' + error);
        data.forEach(function (d) {
            d.Date = parseTime(d.Date);
            d.Trend = +d.Trend;
        });

        // set the ranges // Scale the range of the data
        var x = d3.scaleTime().domain([new Date("1960"), new Date("2015")]).range([0, width]);
        var y = d3.scaleLinear()
            .domain([d3.min(data, function (d) {
                        return d.Trend;
                    }) - 1 / 100 * d3.min(data, function (d) {
                        return d.Trend;
                    }), d3.max(data, function (d) {
                        return d.Trend;
                    }) + 1 / 100 * d3.min(data, function (d) {
                        return d.Trend;
                    })])
            .range([height, 0]);

        // define the line
        var valueline = d3.line()
            .x(function (d) {
                return x(d.Date);
            })
            .y(function (d) {
                return y(d.Trend);
            });

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("#graph_draw").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 + ")");

        //Y Axis label
        svg.append("g")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Carbon dioxide (ppm)");

        // Add the valueline path.
        svg.append("path")
        .data([data])
        .style("opacity", 0)
        .transition()
        .duration(1000)
        .style("opacity", 1)
        .attr("class", "line")
        .attr("d", valueline);

        // Add the X Axis
        svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

        // Add the Y Axis
        svg.append("g")
        .call(d3.axisLeft(y));

        // gridlines in x axis function
        function make_x_gridlines() {
            return d3.axisBottom(x)
            .ticks(10);
        };

        // add the X gridlines
        svg.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_gridlines()
            .tickSize(-height)
            .tickFormat(""));

        // do something as mouseover the graph
        svg.select("svg")
        .on("mouseover", alert("mouse on graph"));
    })
}

Answer 1

将mouser用作内联函数

svg.select("svg")
.on("mouseover", function () {
    alert("mouse on graph")
});

在d3.js中使用.on（“mouseover”，...）

1 个答案: