个人中心
gpt4 book ai didi

javascript - 在 D3 map 中显示事件列表

转载 作者：行者123 更新时间：2023-11-27 22:53:32 25 4
gpt4 key购买 nike

我正在尝试制作阿姆斯特丹 D3 的 map 。 map 显示了举办节日的地点。现在， map 按街区划分。现在，当我将鼠标悬停在某个社区上时，它会显示该社区的名称。但我想要的是显示节日的名称和所有名称。

HTML

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>


    <style>

    .province {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .province:hover {
        fill: #666;
    }
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
</style>




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

/*Variabelen die in de code worden gebruikt. */  
var width = 1000;
var height = 600;
var xy = d3.geo.mercator()
          .scale(100000)
          .center([4.9, 52.36]) 
          .translate([width / 2, height / 2]); 
var canvas = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

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


/*Hier wordt de kaart van Amsterdam ingeladen */        

d3.json("amsterdam.json", function(data) {


    var group = canvas.selectAll("g")
        .data(data.features)  
        .enter()
        .append("g")


    var projection = d3.geo.mercator()
                    .scale(100000)
                    .center([4.9, 52.36]) 
                    .translate([width / 2, height / 2]); 

    var path = d3.geo.path().projection(projection); 


    var areas = group.append("path")
        .attr("d", path) 
        .attr("class", "amsterdam")
            .attr("fill", "grey");

    var path = d3.geo.path()
                .projection(projection);
    var provinces = canvas.selectAll('.province')
                .data(data.features).enter();
            provinces.append('path')
                .attr('class', function(d,i) {
                    return 'province ' + d.properties.name;
                })
                .attr('d', path)
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(canvas.node()).map(function(d) {
                        return parseInt(d);
                    });
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.name);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });

});

/*Vanaf hier worden de festivals ingeladen*/

d3.csv("Festivals.csv", function(d) { 



  var node = canvas.selectAll("circle")
    .data(d)
    .enter()
    .append("circle")
      .attr("cx", function(d, i) { return xy([+d["Longitude"],+d["Latitude"]])[0]; })
      .attr("cy", function(d, i) { return xy([+d["Longitude"],+d["Latitude"]])[1]; })
      .attr("r", "4.5px")
      .attr("fill", "orange")
      .style("opacity", .5)
      .append("title")
      .text(function(d) {return d.Title});





});

</script>
</body>
</html>

festivals.csv(前 2 个)

    Trcid,Title,Shortdescription,Longdescription,Calendarsummary,TitleEN,ShortdescriptionEN,LongdescriptionEN,CalendarsummaryEN,Types,Ids,Locatienaam,City,Adres,Zipcode,Latitude,Longitude,Urls,Media,Thumbnail,Datepattern_startdate,Datepattern_enddate,Singledates,Type1,Lastupdated
b3148e78-f653-484d-a069-9cd4b6cf924c,Amsterdam Salsa Festival,Ondanks de kou buiten krijg je het vanzelf warm bij het jaarlijkse Amsterdam Salsa Festival. ,<strong>Drie dagen vol salsa<br /> </strong>Het festival. georganiseerd door het Meininger Hotel. belooft drie dagen vol dansworkshops. optredens van Nederlandse en internationale dansers en een geweldig themafeest.&nbsp:<br /> Bekijk te zijner tijd de <a target=&quot:_blank&quot: href=&quot:http://www.amsterdamsalsafestival.nl/#!/home&quot: re_target=&quot:_blank&quot:>Amsterdam Salsa Festival website</a> voor meer informatie en kaartverkoop.,Vr 10 februari 2017 23:00 - 05:00 uur. za 11 februari 2017 23:00 - 05:00 uur. zo 12 februari 2017 23:00 - 04:00 uur. Toelichting: Data onder voorbehoud.,Amsterdam Salsa Festival,It may still be a bit chilly outside. but you?re sure to feel the heat at the annual Amsterdam Salsa Festival.,<h2>Three days of Salsa in Amsterdam<strong></strong></h2> <strong></strong>The <strong>Amsterdam Salsa Festival</strong> promises three packed days of <strong>dance workshops</strong>. <strong>performances</strong> by Dutch and international dancers and a <strong>blowout theme party</strong> on Saturday night at the Rhone Congress &amp: Party Centre.<br /> <br /> Head to the <a target=&quot:_blank&quot: href=&quot:http://www.amsterdamsalsafestival.nl/#!/home&quot: re_target=&quot:_blank&quot:>Amsterdam Salsa Festival website</a> for more information and tickets nearer the time.,Fr 10 February 2017 23:00 - 05:00 hour. Sa 11 February 2017 23:00 - 05:00 hour. Su 12 February 2017 23:00 - 04:00 hour. Explanation: Date to be confirmed.,,2.4.1,Sloterdijk,AMSTERDAM,Rhoneweg 12-14,1043 AH,52.390416,4.831372,http://www.amsterdamsalsafestival.nl,https://media.iamsterdam.com/ndtrc/Images/20140416/c9aa34cb-5c23-4591-bc50-8308223d6008.jpg,https://media.iamsterdam.com/ndtrc/Images/20140416/c9aa34cb-5c23-4591-bc50-8308223d6008.jpg,,,10-02-2017.11-02-2017.12-02-2017,,22-2-2016 15:53

225e629a-da76-4012-97db-a47ed088722f,Chinees Nieuwjaar,In 2017 valt het Chinees Nieuwjaar op 28 januari. De meeste activiteiten tijdens het Chinees Nieuwjaar vinden volgens traditie in Amsterdam plaats bij de Nieuwmarkt en de Zeedijk. maar er zijn doorgaans ook feestelijkheden op de Dam.,<h2>Gong Xi Fa Cai! (Gelukkig nieuwjaar!)</h2> Het <strong>Chinees Nieuwjaar</strong>. oftewel het Lunar Nieuwjaar. is het belangrijkste event op de Chinese kalender en wordt wereldwijd gevierd. Op deze dag komen Chinezen met de hele familie. staan rituelen met eten. offers bij tempels en de kleur rood centraal. Bijgelovige personen kunnen hun hart ophalen bij Chinees Nieuwjaar: volgens de Chinezen kun je je namelijk gelukkig eten. Zo staat er standaard <em>yu sheng</em> (rauwe vissalade ) en <em>fai-hai</em> (zeewier) op het menu. die beiden voor geluk en voorspoed zorgen.<br /> <br /> <h2>Het Jaar van de Aap in Amsterdam</h2> 2016 is het Jaar van de Aap. In 2016 vinden de <strong>offici&euml:le feestelijkheden voor het Chinees Nieuwjaar</strong> waarschijnlijk opnieuw op <strong>de Dam</strong> plaats. met honderdduizendklappers om de kwade geesten te verjagen. De Leeuwendans vindt doorgaans plaats bij de <a href=&quot:http://www.iamsterdam.com/nl/uit-in-amsterdam/zien-en-doen/musea-en-galeries/musea-in-amsterdam/beurs-van-berlage&quot:>Beurs van Berlage</a> en <a href=&quot:http://www.iamsterdam.com/nl/uit-in-amsterdam/zien-en-doen/shoppen/overzicht-warenhuizen/de-bijenkorf&quot:>de Bijenkorf</a>. De Bijenkorf organiseert volgens traditie ook jaarlijks speciale activiteiten om Chinees Nieuwjaar te vieren.<br /> <br /> <h2>Chinatown Amsterdam</h2> In de Amsterdamse Chinese <strong>Nieuwmarktbuurt</strong> staat een echte <strong>boeddhistische tempel</strong>: de Fo Guang Shan He Hua. Bij de Chinese tempel vindt jaarlijks de Chinese nieuwjaarsviering plaats.&nbsp:Mocht je trek krijgen van al het spektakel dan kun je je tegoed doen aan Chinees eten. bij bijvoorbeeld het drijvende Chinese restaurant Sea Palace op de Oosterdokskade. Ook aan de Stormsteeg en de Geldersekade zitten veel Chinese restaurants.,Za 28 januari 2017 09:00 - 20:00 uur.,Chinese New Year,In 2017. Chinese New Year falls on 28 January. Festivities traditionally take place on Amsterdam's Dam Square and around the historic Nieuwmarkt/Zeedijk neighbourhood on the Saturday nearest New Year.,<h2>Year of the Monkey in Amsterdam</h2> 2016 is the Year of the Monkey. <strong>Amsterdam's Chinese New Year celebrations</strong> in 2016 took place on <strong>Dam Square</strong> and around the <strong>Nieuwmarkt</strong> (<strong>Amsterdam's Chinatown area</strong>). There were dragon and lion dances as well as fireworks.  <a href=&quot:http://www.iamsterdam.com/en/visiting/what-to-do/shopping/overview-department-stores/de-bijenkorf-luxury-department-store&quot:>De Bijenkorf</a> department  store traditionally organises special activities to celebrate Chinese New Year. including in-store dragon and lion dances. calligraphy workshops. music performances and tea ceremonies. <br /> <h2>A taste of China</h2> If you&rsquo:re looking for something more intimate. retreat to the Fo Guang Shan He Hua. a real Buddhist temple which usually has a special programme. Alternatively. grab yourself a meal at the Sea Palace (Europe&rsquo:s first floating Chinese restaurant) or at one of the many Chinese restaurants along the Stormsteeg and Geldersekade.<br /> <br /> <h2>Gong Xi Fa Cai! (Happy New Year!)</h2> <strong>Chinese New Year</strong>. also known as the Lunar New Year. is the most important event in the Chinese calendar. It&rsquo:s a special occasion whichever part of the world you&rsquo:re in. and nearly always marked by family gatherings. food rituals. offerings at temples and the colour red. The superstitious will particularly enjoy Chinese New Year&rsquo:s Eve. when a raw fish salad (yu sheng) is said to bring good luck and fai-hai. a type of seaweed. prosperity. (The vegetarian option is lettuce. which the Chinese believe sounds like 'luck').,Sa 28 January 2017 09:00 - 20:00 hour.,,2.4.1,Burgwallen-Oude Zijde,AMSTERDAM,Dam 1,1012 JS,52.373561,4.894367,,https://media.iamsterdam.com/ndtrc/Images/20130110/c88bba81-ec5c-4179-89dc-`f932e0c772a0.jpg,https://media.iamsterdam.com/ndtrc/Images/20130110/c88bba81-ec5c-4179-89dc-f932e0c772a0.jpg,,,28-1-2017,,4-3-2016 13:59

有人可以帮助我吗？我为此苦苦挣扎了很多年......

最佳答案

一旦您获得了包含每个事件所在省份的 festivals.csv，您就需要进行以下更改:

首先，让我们将 csv 函数包装在 json 函数中。这样，您的 csv 数据将在工具提示中可见:

d3.json("amsterdam.json", function(data) {

    d3.csv("Festivals.csv", function(dataCsv) {

    //all your code for both functions goes here

    };

};

请注意，我为 csv 函数的数据编写了 dataCsv。请随意更改它。

现在，在工具提示的 mousemove 函数中:

.on('mousemove', function(d) {
                var mouse = d3.mouse(canvas.node()).map(function(d) {
                    return parseInt(d);
                });

                var province = d.properties.name;

                var provinceEvents = dataCsv.filter(function(d){
                    return d.locatienaam == province
                }).map(function(d){ return d.Title });

                tooltip.classed('hidden', false)
                    .attr('style', 'left:' + (mouse[0] + 15) +
                            'px; top:' + (mouse[1] - 35) + 'px')
                    .html(province + provinceEvents);
            })

这里，provinceEvents 是一个字符串数组。您可以轻松地操作它并在工具提示中创建一个列表。

关于javascript - 在 D3 map 中显示事件列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37834630/

25 4 0
文章推荐： c++ - 一样的功能？使用 GMP(C++) 运行速度慢大约 10 倍
文章推荐： javascript - PHP - 如何将错误消息返回到注册页面
文章推荐： javascript - MongoDB 脚本执行存储在变量中的查询
文章推荐： javascript - D3.js - 使用下拉菜单缩放到 bbox
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com