针对Chloropleth Map的D3 js工具提示问题

时间:2016-08-16 16:01:36

标签: javascript html d3.js tooltip

我是D3.js的新手。我一直试图在Michelle Chandra的现有d3 chloropleth Map中添加工具提示。但是我无法取得任何进展,工具提示似乎没有出现。我在哪里做错了?任何帮助将不胜感激。 http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

由于

    <style type="text/css">

    /* On mouse hover, lighten state color */
    path:hover {
        fill-opacity: .7;
    }

    /* Style for Custom Tooltip */



    div.tooltip {   
            position: absolute;           
            text-align: center;           
            width: 60px;                  
            height: 28px;                 
            padding: 2px;             
            font: 12px sans-serif;        
            background: white;   
            border: 0px;      
            border-radius: 8px;           
            pointer-events: none;         
        }

        /* Legend Font Style */
        body {
            font: 11px sans-serif;
        }

        /* Legend Position Style */
        .legend {
            position:absolute;
            left:800px;
            top:350px;
        }

        </style>
    </head>
    <body>
        <script type="text/javascript">

        /*  This visualization was made possible by modifying code provided by:

        Scott Murray, Choropleth example from "Interactive Data Visualization for the Web" 
        https://github.com/alignedleft/d3-book/blob/master/chapter_12/05_choropleth.html   

        Malcolm Maclean, tooltips example tutorial
        http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

        Mike Bostock, Pie Chart Legend
        http://bl.ocks.org/mbostock/3888852      */


        //Width and height of map
        var w = 900;
        var h = 600;

        // D3 Projection
        var projection = d3.geo.albersUsa()
                               .translate([w/2, h/2])    // translate to center of screen
                               .scale([1000]);          // scale things down so see entire US

        // Define path generator
        var path = d3.geo.path()               // path generator that will convert GeoJSON to SVG paths
                     .projection(projection);  // tell path generator to use albersUsa projection


        // Define linear scale for output
        var color = d3.scale.linear()
                            .range(["rgb(24,143,95)","rgb(51,188,196)","rgb(155,226,183)","rgb(217,91,67)"]);

        var legendText = ["Cities Lived", "States Lived", "States Visited", "States Not Visited Yet"];

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

        // Append Div for tooltip to SVG
        var div = d3.select("body")
                    .append("div")   
                    .attr("class", "tooltip")               
                    .style("opacity", 0);

        // Load in my states data!
        d3.csv("stateslived.csv", function(data) {
        color.domain([0,1,2,3]); // setting the range of the input data

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

            // Loop through each state data value in the .csv file
            for (var i = 0; i < data.length; i++) {

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

                // Grab data value 
                var dataValue = data[i].visited;

                // 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.visited = dataValue; 

                        // Stop looking through the JSON
                        break;
                    }
                }
            }

        // Bind the data to the SVG and create one path per GeoJSON feature
        svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
           .style("stroke", "#fff")
           .style("stroke-width", "1")
           .style("fill", function(d) {

            // Get data value
            var value = d.properties.visited;

            if (value) {
            //If value exists…
            return color(value);
            } else {
            //If value is undefined…
            return "rgb(213,222,217)";
             }
           });


           // Map the cities I have lived in!
           d3.csv("cities-lived.csv", function(data) {

             svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function(d) {
                    return projection([d.lon, d.lat])[0];
                })
                .attr("cy", function(d) {
                    return projection([d.lon, d.lat])[1];
                })
                .attr("r", function(d) {
                    return Math.sqrt(d.years) * 4;
                })
                .style("fill", "rgb(217,91,67)")    
                .style("opacity", 0.85) 

                // add browser tooltip of city name
                //.append("title")
                //.text(function(d) {
                //       return d.place;
                //});  

                // Modification of custom tooltip code provided by Malcolm Maclean, "D3 Tips and Tricks" 
                // http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
                .on("mouseover", function(d) {      
                        d3.select(this).transition().duration(300).style("opacity", 1);

                    div.transition().duration(200)      
                       .style("opacity", .9);      
                       div.text(d.properties.visited)
                       .style("left", (d3.event.pageX) + "px")     
                       .style("top", (d3.event.pageY - 28) + "px");    
                })   

                // fade out tooltip on mouse out               
                .on("mouseout", function(d) {       
                     div.transition()        
                        .duration(500)      
                        .style("opacity", 0);   
            });

        });  

        // Modified Legend Code from Mike Bostock: http://bl.ocks.org/mbostock/3888852
        var legend = d3.select("body").append("svg")
                       .attr("class", "legend")
                       .attr("width", 140)
                       .attr("height", 200)
                       .selectAll("g")
                       .data(color.domain().slice().reverse())
                       .enter()
                       .append("g")
                       .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

            legend.append("rect")
                  .attr("width", 18)
                  .attr("height", 18)
                  .style("fill", color);

            legend.append("text")
                  .data(legendText)
                  .attr("x", 24)
                  .attr("y", 9)
                  .attr("dy", ".35em")
                  .text(function(d) { return d; });
    });

});
        /*  This code generate paths without mapping to other data
        // Load JSON file and generate path for each state
        d3.json("us-states.json", function(json) {  // file path, callback function called when data loaded
                svg.selectAll("path")               // creates empty references to all the paths
                   .data(json.features)             // loop through our data (the states in the array) and bind to paths
                   .enter()                         // create placeholder to reference the new elements
                   .append("path")                  // add to the DOM!
                   .attr("d", path)                 // generate paths for each state
                   .style("fill", "steelblue");     // make the states blue!
                }); */

        </script>

2 个答案:

答案 0 :(得分:0)

我不确定这句话应该做什么:

d3.select(this).transition().duration(300).style("opacity", 1);

似乎选择了窗口对象。 人们需要查看你的json文件,看看你是否在div中获得了正确的数据。

无耻的插头。看看foxToolTip.js。我认为它比d3tip更容易,更灵活。

https://github.com/MichaelRFox/foxToolTip.js

答案 1 :(得分:0)

div为div后,您必须使用html,而不是text

div.transition().duration(200)      
    .style("opacity", .9);      
div.html(d.properties.visited)
    .style("left", (d3.event.pageX) + "px")     
    .style("top", (d3.event.pageY - 28) + "px");