Question

我要做的是获得一个函数，当我将鼠标移动到使用d3.json文件绘制的Map（USA）上时，这将显示存储在CSV文件中的数据。

我遇到的问题是我不知道如何实现鼠标悬停功能，因为我不知道应该在哪里引用。

这是我的代码。我不知道该怎么做。任何提示都会非常感激。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Applying a projection to SVG paths</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */
        </style>
    </head>
    <body>
        <script type="text/javascript">

        //Width and height
                    var w = 500;
                    var h = 300;

                    //Define map projection
                    var projection = d3.geo.albersUsa()
                                           .translate([w/2, h/2])
                                           .scale([500]);

                    //Define path generator
                    var path = d3.geo.path()
                                     .projection(projection);

                    //Define quantize scale to sort data values into buckets of color
                    var color = d3.scale.quantize()
                                        .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                                        //Colors taken from colorbrewer.js, included in the D3 download

                    //Create SVG element
                    var svg = d3.select("body")
                                .append("svg")
                                .attr("width", w)
                                .attr("height", h);



                    //Load in agriculture data
                    d3.csv("us-ag-productivity-2004.csv", function(data) {

                        //Set input domain for color scale
                        color.domain([
                            d3.min(data, function(d) { return d.value; }), 
                            d3.max(data, function(d) { return d.value; })
                        ]);

                        //Load in GeoJSON data
                        d3.json("us-states.json", function(json) {

                            //Merge the ag. data and GeoJSON
                            //Loop through once for each ag. data value
                            for (var i = 0; i < data.length; i++) {

                                //Grab state name
                                var dataState = data[i].state;

                                //Grab data value, and convert from string to float
                                var dataValue = parseFloat(data[i].value);

                                //Find the corresponding state inside the GeoJSON
                                for (var j = 0; j < json.features.length; j++) {

                                    var jsonState = json.features[j].properties.name;

                                    if (dataState == jsonState) {

                                        //Copy the data value into the JSON
                                        json.features[j].properties.value = dataValue;

                                        //Stop looking through the JSON
                                        break;

                                    }
                                }       
                            }


                            //Bind data and create one path per GeoJSON feature
                            svg.selectAll("path")
                               .data(json.features)
                               .enter()
                               .append("path")
                               .attr("d", path)
                               .style("fill", function(d) {
                                    //Get data value
                                    var value = d.properties.value;



                                    if (value <1.15) {
                                        //If value exists…
                                        return color(value);
                                    } else if (value >1.15) {
                                            return "red"; }
                                                else {
                                    //If value is undefined…
                                    return "#ccc";
                                }




                                });                 
                        });     

                    });




                </script>
            </body>
        </html>

Answer 1

您必须添加3个事件mousedown，mousemove，mouseup

const target = document.getElementsByTagName("SVG");

// or by id
const target = document.getElementsById("someid");

target.addEventListener('mousedown', () => {
    console.log('mousedown');
});

target.addEventListener('mousemove', () => {
    console.log('mousemove');
});

target.addEventListener('mouseup', () => {
    console.log('mouseup');
});

但是我的东西d3.js处理了所有这些，请查看官方文档。

显示来自JSON .on的数据（“mouseover”，如何？

1 个答案: