如何在D3.js中绘制地图投影上的点，并使用范围滑块过滤数据

How to plot points on a map projection in D3.js and filter the data using range sliders?

本文关键字：使用范围 数据 过滤 D3 js 地图投影 绘制      更新时间：2023-09-26

以下是我尝试使用的代码的当前状态。http://jaskirat.me/uploads/DataVis/map_projection/这些点被映射到上个月发生的地震。我想要顶部的滑块根据日期范围过滤点。

我该怎么做？以下是创建点的函数。

function createPoints() {
    svg.selectAll(".symbol")
        .data(centroid.features.sort(function(d) {
            return d.properties.mag;
        }))
        .enter().append("path")
        .attr("fill", "rgba(0, 140, 200, 0.5)")
        //INTERACTION
        .on("mouseover", function(d, i) {
            d3.select(this)
                .attr("fill", "red");
            // Tooltip
            var tooltipX = parseFloat(d3.select(this).attr("x")) + 10;
            var tooltipY = parseFloat(d3.select(this).attr("y")) + 10;
            svg.append("text")
                .attr("fill", "rgba(0, 140, 200, 1)")
                .attr("x", 100)
                .attr("y", height - 200)
                .text("PLACE : " + d.properties.place)
                .attr("id", "tooltip")
                .append("tspan")
                .attr("x", 100)
                .attr("dy", 20)
                .text("LAT : " + d.geometry.coordinates[0])
                .append("tspan")
                .attr("x", 100)
                .attr("dy", 20)
                .text("LON : " + d.geometry.coordinates[1]);
        })
        .on("mouseout", function(d) {
            d3.select(this)
                .attr("fill", "rgba(0, 140, 200, 0.5)")
            d3.select("#tooltip").remove();
        })
        .attr("d", path.pointRadius(function(d) { // XY Coordinates calculated by .pointRadius
            return radius(d.properties.mag);
        }));
}

我修改了如下代码

queue()
.defer(d3.json, "world-110m.json")
.defer(d3.json, "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson")
.await(ready);
function ready(error, world, centroid) {
var minVal = 0;
var maxVal = 0;
d3.select('#slider1').call(d3.slider().axis(true).min(0).max(30).step(1).value([5, 10]).on("slide", function(evt, value) {
    d3.select('#slider1textmin').text(value[0]);
    d3.select('#slider1textmax').text(value[1]);
    minVal = value[0];
    maxVal = value[1];
    refreshPoints();
}));
function refreshPoints() {
    svg.selectAll("g.symbol").remove();
    console.log("remove");
    // createPoints();
}

我需要弄清楚如何在滑块移动时删除点。可能语法不正确。

相关文章：