Choropleth 地圖上的 D3js HTML 工具提示

Question

我正在 D3.js 中構建 Choropleth 地圖。

為了讓用戶更容易理解信息，我決定添加一個 HTML 工具提示。

為此，我定義了一個名為 tooptip 的變量：

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip");

當我綁定數據時，我添加了：

.on("mouseover", function(d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html("<strong>" + d.properties.average_price_per_pound + "</strong>" + "<br/>" + "Population: " +
                    (d.properties.average_price_per_pound).toLocaleString() + " Million")
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            })

但它不起作用，如下圖所示（注意：當我將鼠標懸停在一個狀態上時會出現紅色）。

我嘗試了一種不同的方法，並通過添加一個簡單的文本工具提示（在我嘗試添加 html 工具提示的同一個地方），即使我的目標是添加一個 html 工具提示，我也能夠使它工作：

.text(d => d.properties.average_price_per_pound);

---

考慮到我打算添加一個 HTML 工具提示，在此過程中的任何幫助表示贊賞。

我將在下面留下我的app.js，因為它可能會有所幫助。

---

應用程序.js

//  Define width and height
var chart_width     =   800;
var chart_height    =   600;


// Define the color scale
var color           =   d3.scaleQuantize().range([
    "#f7fbff",
    "#deebf7",
    "#c6dbef",
    "#9ecae1",
    "#6baed6",
    "#4292c6",
    "#2171b5",
    "#08519c",
    "#08306b"
]);


// Navbar
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}


// Define the Tooltip
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip");


// Define the Map Projection
var projection      =   d3.geoAlbersUsa()
    .translate([ 0,0 ]);
var path            =   d3.geoPath( projection );


// Create SVG
var svg             =   d3.select("#chart")
    .append("svg")
    .attr("width", chart_width)
    .attr("height", chart_height);


// Zoom
var zoom_map        =   d3.zoom()
    .scaleExtent([ 0.5, 3.0 ])
    .translateExtent([
        [ -1000, -500 ],
        [ 1000, 500 ]
    ])
    .on( 'zoom', function(){
    // console.log( d3.event );
    var offset      =   [
        d3.event.transform.x,
        d3.event.transform.y
    ];
    var scale       =   d3.event.transform.k * 1100;

    projection.translate( offset )
        .scale( scale );

    svg.selectAll( 'path' )
        .transition()
        .attr( 'd', path );

    svg.selectAll( 'circle' )
        .transition()
        .attr( "cx", function(d) {
            return projection([d.longitude, d.latitude])[0];
        })
        .attr( "cy", function(d) {
            return projection([d.longitude, d.latitude])[1];
        });
});

var map             =   svg.append( 'g' )
    .attr( 'id', 'map' )
    .call( zoom_map )
    .call(
        zoom_map.transform,
        d3.zoomIdentity
            .translate( chart_width / 2, chart_height / 2 )
            .scale( 1 )
    );

map.append( 'rect' )
    .attr( 'x', 0 )
    .attr( 'y', 0 )
    .attr( 'class', "mapsvg")
    .attr( 'width', chart_width )
    .attr( 'height', chart_height )
    .attr( 'opacity', 0 );


// Load Data
var honeyyear = document.getElementById("vardatayear").value || 2013;

// if(!honeyyear){
//     honeyyear  = 2013
// }

// Select what are we analyzing
// var honeyattribute = document.getElementById('some_input_id').value;

d3.json( `data/HoneyProduction-${honeyyear}.json`, function( honey_data ){

    color.domain([
        d3.min( honey_data, function(d){
            return d.average_price_per_pound;
        }),
        d3.max( honey_data, function(d){
            return d.average_price_per_pound;
        })
    ]);

    // Load GeoJson Data
    d3.json( 'data/us.json', function( us_data ){
        us_data.features.forEach(function(us_e, us_i){
            honey_data.forEach(function(h_e,h_i){
                if( us_e.properties.name !== h_e.state ){
                    return null;
                }

                us_data.features[us_i].properties.average_price_per_pound   =   parseFloat(h_e.average_price_per_pound);
            });
        });


        // Bind Data
        map.selectAll( 'path' )
            .data( us_data.features )
            .enter()
            .append( 'path' )
            .attr( 'd', path )
            .attr( 'fill', function( d ){
                var average_price_per_pound         =   d.properties.average_price_per_pound;
                return average_price_per_pound ? color( average_price_per_pound ) : '#525252';
            })
            .attr( 'stroke', '#fff' )
            .attr( 'stroke-width', 1 )
            .append('title')
            // .text(d => console.log(d))
            .on("mouseover", function(d) {
                tooltip.transition()
                    .duration(200)
                    .style("opacity", .9);
                tooltip.html("<strong>" + d.properties.average_price_per_pound + "</strong>" + "<br/>" + "Population: " +
                    (d.properties.average_price_per_pound).toLocaleString() + " Million")
                    .style("left", (d3.event.pageX + 5) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
                tooltip.transition()
                    .duration(500)
                    .style("opacity", 0);
            })
            // // For the simple tooltip
            // .text(d => d.properties.average_price_per_pound);

    });



    // Legend
    const x = d3.scaleLinear()
        .domain(d3.extent(color.domain()))
        .rangeRound([500, 750]);

    const g = svg.append("g")
        .attr( "class", "legend" )
        .attr("transform", "translate(0,40)");

    g.selectAll("rect")
        .data(color.range().map(d => color.invertExtent(d)))
        .enter().append("rect")
        .attr("height", 8)
        .attr("x", d => x(d[0]))
        .attr("width", d => x(d[1]) - x(d[0]))
        .attr("fill", d => color(d[0]));

    g.append("text")
        .attr("class", "caption")
        .attr("x", x.range()[0])
        .attr("y", -6)
        .attr("fill", "#fff")
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text('Average Price per Pound (cents)');

    g.call(d3.axisBottom(x)
        .tickSize(13)
        .tickFormat(( honey_data, function(d){
            return d.average_price_per_pound;
        }),)
        .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
        .select(".domain")
        .remove();

    // svg.append("g")
    //     .selectAll("path")
    //     .data(honey_data, function(d){
    //         return d.average_price_per_pound;
    //     })
    //     .enter().append("path")
    //     .attr("fill", d => color(d.average_price_per_pound))
    //     .attr("d", path)
    //     .append("title")
    //     .text(d => (d.average_price_per_pound));
    //
    // svg.append("path")
    //     .datum(honey_data, function(d){
    //         return d.average_price_per_pound;
    //     })
    //     .attr("fill", "none")
    //     .attr("stroke", "white")
    //     .attr("stroke-linejoin", "round")
    //     .attr("d", path);


});

// Panning
d3.selectAll( '#buttons button.panning' ).on( 'click', function(){
    var x           =   0;
    var y           =   0;
    var distance    =   100;
    var direction   =   d3.select( this ).attr( 'class' ).replace( 'panning ', '' );

    if( direction === "up" ){
        y           +=  distance; // Increase y offset
    }else if( direction === "down" ){
        y           -=  distance; // Decrease y offset
    }else if( direction === "left" ){
        x           +=  distance; // Increase x offset
    }else if( direction === "right" ){
        x           -=  distance; // Decrease x offset
    }

    map.transition()
        .call( zoom_map.translateBy, x, y );
});


// Zooming
d3.selectAll( '#buttons button.zooming' ).on( 'click', function(){
    var scale       =   1;
    var direction   =   d3.select(this).attr("class").replace( 'zooming ', '' );

    if( direction === "in" ){
        scale       =  1.25;
    }else if(direction === "out"){
        scale       =  0.75;
    }

    map.transition()
        .call(zoom_map.scaleBy, scale);
});


// Slider
function update(year){
     slider.property("value", year);
     d3.select(".year").text(year);
     // honeyyear.style("fill", function(d) {
     //      return color(d.properties.years[year][0].rate)
     };


var slider = d3.select(".slider")
    .append("input")
    .attr("type", "range")
    .attr("min", 2009)
    .attr("max", 2013)
    .attr("step", 1)
    .on("input", function() {
         var year = this.value;
         update(year);
     });

update(2013);

Answer 1

問題是當您append('title')時，您對路徑的選擇會丟失，因此您基本上是將鼠標懸停事件偵聽器添加到一個空的 svg <title>標記，該標記是您實際要附加的路徑的子級事件處理程序。

您仍然可以在此鏈中附加標題，只要在附加事件處理程序后執行即可。

請參閱下面的這些並排示例：

這有效 - 事件處理程序附加到所需的元素

 var tooltip = d3 .select("body") .append("div") .attr("class", "tooltip"); const sampleData = [ { properties: { average_price_per_pound: 5000 } }, { properties: { average_price_per_pound: 15000 } }, { properties: { average_price_per_pound: 555000 } } ]; d3 .select("body") .selectAll(".item") .data(sampleData) .enter() .append("div") .classed("item", true) .html(d => { return d.properties.average_price_per_pound; }) .on("mouseover", function(d) { tooltip.html( `<strong>${ d.properties.average_price_per_pound }</strong><br/>Population: ${d.properties.average_price_per_pound.toLocaleString()} Million` ); });

 .tooltip { position: absolute; background: white; border: 2px solid black; left: 100px; padding: 5px; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

不起作用 - 事件處理程序附加到不需要的空子元素

 var tooltip = d3 .select("body") .append("div") .attr("class", "tooltip"); const sampleData = [ { properties: { average_price_per_pound: 5000 } }, { properties: { average_price_per_pound: 15000 } }, { properties: { average_price_per_pound: 555000 } } ]; d3 .select("body") .selectAll(".item") .data(sampleData) .enter() .append("div") .classed("item", true) .html(d => { return d.properties.average_price_per_pound; }) .append('span') .on("mouseover", function(d) { tooltip.html( `<strong>${ d.properties.average_price_per_pound }</strong><br/>Population: ${d.properties.average_price_per_pound.toLocaleString()} Million` ); });

 .tooltip { position: absolute; background: white; border: 2px solid black; left: 100px; padding: 5px; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>