Question

以下是我正在尝试使用的代码的当前状态。 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);
        }));
}

Answer 1

我已按如下方式修改了代码

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();
}

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

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

1 个答案: