filtering - D3过滤数据点-6ren

filtering - D3过滤数据点

转载作者：行者123 更新时间：2023-12-02 07:05:48

25

4

我正在实现经典墨卡托示例 (https://github.com/mbostock/d3/blob/master/examples/mercator/mercator.html)，我已将其更改为放大到阿富汗并仅使用一个自定义 slider 。我正在读取发生爆炸的地点的 GeoJSON 数据，图表在加载时将它们全部映射。我想使用 slider 一次只查看一个月的爆炸点，但无法过滤结果。我已经根据 Google 组中的帖子尝试了几种方法，但无法理解如何过滤之前从“explosions.json”读取的数据。感谢您的帮助!

    <!DOCTYPE html>
    <html>
    <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>IED Attacks in Afghanistan (2004-2009)</title>
<script type="text/javascript" src="../d3.v2.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">

    @import url("../lib/jquery-ui/jquery-ui.css");

    body, .ui-widget {
    font: 14px Helvetica Neue;
    }

    svg {
    width: 960px;
    height: 600px;
    border: solid 1px #ccc;
    background: #eee;
    }

    line {
    stroke: brown;
    stroke-dasharray: 4,2;
    }

    path {
    fill: #ccc;
    stroke: #fff;
    }

    div {
    width: 960px;
    }

</style>
</head>
<body>
<h3>IED Attacks in Afghanistan (2004-2009)</h3>
<script type="text/javascript">

        // Create the Mercator Projection (Map)
        var xy = d3.geo.mercator(),
            path = d3.geo.path().projection(xy);


        // Create the states variable
        var states = d3.select("body")
        .append("svg")
        .append("g")
            .attr("id", "states");
        // Create the equator variable
        var equator = d3.select("svg")
        .append("line")
            .attr("x1", "0%")
            .attr("x2", "100%");
        // Create the explosions variable
        var explosions = d3.select("svg")
        .append("g")
            .attr("id","explosions");

        // Load in the states & equator data from the file 'world-countries.json'
        d3.json("world-countries.json", function(collection) {
            states
                .selectAll("path")
                .data(collection.features)
                .enter().append("path")
                .attr("d", path)
                .append("title")
                .text(function(d) { return d.properties.name; });
            equator
                .attr("y1", xy([0, 0])[1])
                .attr("y2", xy([0, 0])[1]);
        });

        // the variable that holds our translate, center on Afghanistan
        var translate = xy.translate(); //create translation to center gride in different area
        translate[0] = -1741;
        translate[1] = 1487;
        xy.translate(translate); // center

        xy.scale(12000); //zoom in

        // Load in the explosions data from the file 'explosions.json'
        d3.json("explosions.json", function(collection) {
            explosions
                .selectAll("path") //make a path and attach data
                .data(collection.features)
                .enter().append("path")
                .attr("d", path)
                .style("stroke","red") //color the path points
                .style("stroke-width",2) //size of point stroke
                .attr("class","explosionpoint")
                .append("title") //title is the 'name' field in the json file
                .text(function(d) { return d.properties.name; });
        });



    </script>

    <p></p>
    <!-- Slider -->
    <div id="scale"></div><p></p>
    <script type="text/javascript">

        $("#scale").slider({
        min: 20040101, //min : 1/1/04
        max: 20100101, //max: 1/1/10
        value: 20060601, //default slider value
        step: 100, // step is the allow increments the slider can move. 100 = one month
        slide: function(event, ui) {


            /* REMOVE ALL EXPLOSION PATHS EXCEPT FOR A PARTICULAR MONTH OR RELOAD WITH FILTERED RESULTS */
        }
        });

</script>

最佳答案

您需要发布部分或全部 explosions.json 对象以获得具体答案。但是，如果 JSON 的结构类似于 {explosion1:{data1:true, data2:true}, explosion2:{data1:true, data2:false}}:

function filterJSON(json, key, value) {
  var result = {};
  for (var explosionIndex in json) {
    if (json[explosionIndex][key] === value) {
      result[explosionIndex] = json[explosionIndex];
    }
  }
  return result;
}

(例如 filterJSON(myjson, "data1", true) 将给出所有带有 data1:true 的爆炸)

这不是 d3 特有的。

然后你可以在 d3 端使用类似这样的东西:

explosions.data(myFilteredData).exit().remove(); // remove ones you don't want
explosions.enter().append("path")... // add back ones you do want

如果我了解您的应用程序，实际上最好只切换 SVG 元素的 visiblity 属性。

var sliderrange = [20040101, 20040201]; //replace with code based on your slider
explosions.selectAll(".explosionpoint").attr("visibility", function(d) {
  //Replace with the correct date comparison logic
  return d.date < sliderrange[1] && d.date > sliderrange[0] ? "visible" : "hidden";
});

关于filtering - D3过滤数据点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12186220/

25

4

0

文章推荐： c - 子类化控件时如何处理控件的通知？比如EN_CHANGE？

文章推荐： PERL 如何将本地时间格式转换为 unixtime

文章推荐：用于 Web 开发的 Perl

javascript - Array.filter 与 $filter ('filter' )
我应该在 Angular 应用程序中使用哪个，为什么？ array.filter(o => o.name === myName); 或 $filter('filter')(array, {name:
django - 在 Django 中使用 ".filter().filter().filter()..."有什么缺点吗？
以下两个调用是否解析为 Django 中的等效 SQL 查询？链接多个调用 Model.objects \ .filter(arg1=foo) \ .filter(arg2=bar) \ ... 将
filter - java.lang.NoClassDefFoundError : org/apache/hadoop/hbase/filter/Filter 错误
我正在尝试在 hbase-1.0.0 上运行 completebulkload。但是遇到错误， "java.lang.NoClassDefFoundError: org/apache/hadoop/h
git - "--tree-filter"中的 "--index-filter"和 "git filter-branch"有什么区别？
我从这篇文章中学习了“树”和“索引”:Learning Git Internals by Example 但是当谈到“git filter-branch”命令时，我不知道“--tree-filter”
c# - 异常 : The given filter must implement one or more of the following filter interfaces when implementing custom filter in WebAPI 2
我正在尝试构建我的自定义过滤器以进行身份验证，但是当我尝试运行我的 WebAPI 解决方案时遇到了这个问题: The given filter instance must implement on
How to tag items by an array of filtering functions by the filtering functions names, smootly as I define new filtering functions(如何在定义新的过滤函数时，顺畅地通过过滤函数名称的过滤函数数组来标记项目)
我想保留一个过滤器函数的列表，并通过返回true的过滤器来标记这些项。这是接近但不完全。。主要问题是std：：stringify！总是返回“ADF”，可能是我声明为ADF的变量名。。第二个问题是，在定
How to tag items by an array of filtering functions by the filtering functions names, smootly as I define new filtering functions(如何在定义新的过滤函数时，顺畅地通过过滤函数名称的过滤函数数组来标记项目)
我想保留一个筛选器函数列表，并通过返回True的筛选器来标记这些项目。这已经很接近了，但还不完全是。。主要问题是std：：stringify！总是返回“ADF”，可能是我声明为ADF的变量名。。第二个
filter - graphql where filter - "Unknown argument\"where\"
我尝试在 graphql 查询中使用 where: filter 但不幸的是我遇到了一些错误。我做错了什么？ shoeposts { data { attributes(where: {s
filter - ZF2 : How do I implement a custom filter?
几周以来，我一直在使用 Zend Framework 2，尽管在线文档非常不完整，但我还是设法建立了我的网站的初稿。不幸的是，我在尝试实现 Zend\Filter\File\Rename 过滤器的自
filter - APC 中的 apc.filter
我正在尝试在 APC 中使用 apc.filter 等功能。但是我所做的一切都不起作用我应该完成 2 项任务。 1)需要包含1个目录用于缓存。我的代码在apc.ini apc.cache by de
filter - 你如何处理 Rust filter() 中的错误？
我想使用一个可能返回 Err 的过滤器函数结果，并将其冒泡到包含函数: mycoll.into_iter() .filter(|el| { if el == "bad" { E
filter - yii Controller filters() 方法模式
每个 Controller 都应该有方法filters()，在那里你可以指定一些类，我想知道，这些类是如何被框架包含的？这些类是如何配置的，以及何时配置，也许有人可以给我一个使用filters()并包
filter - 我如何自己编写 Matlab "filter"函数？
我想在一维信号上使用巴特沃斯滤波器。在 Matlab 中，脚本如下所示: f=100; f_cutoff = 20; fnorm =f_cutoff/(f/2); [b,a] = butter
filter - 不再支持 Neo4j Filter 功能
我想比较两个列表，以便找到第一个列表中不在第二个列表中的值并返回它们。提前谢谢大家代码返回:不再支持过滤器有没有其他方法可以做到这一点 MATCH (cu:Customer{name: "myCust
android - Filter.filter()的Filter.Filterlistener如何获取结果？
在 Android 应用程序中，我有一个通用设置 -- 一个带有 ArrayAdapter 的 ListView。在某一时刻，我调用了适配器的 getFilter().filter() 方法，它很好地
javascript - .filter 中的 ES6 .filter
所以我有如下数据: [ { "id": 0, "title": "happy dayys", "owner": {"id": "1", "username
javascript - 通过 $filter 创建和使用新的 `filter`
阅读Mastering Web Development with AngularJS ，我正在尝试创建并使用一个使用 $filter 模块/关键字的新过滤器。 HTML
ruby - 暂停在 Before filter 仍然进行到 After filter
所以我的理解是 halt 命令应该停止当前过滤器中的请求，但它似乎继续。下面是一个非常简单的 Sinatra 应用程序，演示了这一点。服务器.rb require 'sinatra' before
javascript - UIkit 3 的 Filter 组件 : Set active filter with URL hash - unable to change active filter with JS
我正在尝试将散列传递给 URL 以设置 UIkit 过滤器。 All
python - 使用 django-filters 将多个过滤器合并为一个 filter()
我正在使用 django-filter应用程序。但是有一个问题我不知道如何解决。它几乎与 django 文档中描述的完全相同: https://docs.djangoproject.com/en/1.

首页

博学

6Ren·AI

商城

filtering - D3过滤数据点