d3.geo MultiPoint da qanday qilib turli nuqtalar uchun turli shakllarni taqdim eta olaman?

Menda d3.geo yordamida grafik tuzayotgan geoJson ma'lumotlarim bor.

Men shunga o'xshash narsalarni yozganimda

d3.select("svg")
   ... 
   .attr("d", function(d) {
                return path({
                    type:"MultiPoint",
                    coordinates: get_activity_coords_(d.activities)
                });
   })

Men har doim har bir koordinata uchun aylana olaman. Koordinatalar sayohatning turli to'xtash joylarini ifodalaydi. Men afzal ko'rgan narsa birinchi va oxirgi koordinata uchun boshqa shakldir.

Buni MultiPoint yordamida qilish mumkinmi, men amal qiladigan misol bormi? Men nuqtalarni birma-bir chizishim mumkin edi, lekin MultiPoint juda tezroq ekanligini o'qiganimni eslayman. Bundan tashqari, kodni o'qish ancha aniq bo'ladi.

Katta rahmat.


d3.js geo
person Dinesh    schedule 20.03.2014    source manba
comment
path funksiyasiga o'tkazilgan koordinatalarni o'zgartirishingiz kerakdek tuyuladi.   -  person Lars Kotthoff    schedule 20.03.2014

Javoblar (1)


arrow_upward
3
arrow_downward

d3.geo.path bilan MultiPoint geoJSON uchun turli shakllarni yarata olmaysiz. Siz radiusni funksiya asosida o‘zgartirishingiz mumkin, lekin u shunday ko‘rinadi siz uni faqat nuqta uchun emas, balki faqat funksiya boʻyicha oʻrnatishingiz mumkin, shuning uchun ballar toʻplamini bir nechta funksiyalarga boʻlishingiz va bitta elementdan foydalanish unumdorligini yoʻqotishingiz kerak boʻladi. .

Biroq, buni amalga oshirishning boshqa usullari mavjud.

Siz aytib o'tganingizdek, variantlardan biri har bir nuqta uchun alohida <path> element bilan ichki tanlov yaratish va har bir yo'lni d3.svg.symbol() funksiyasi yordamida chizishdir. Shundan so'ng siz belgi funksiyasini ma'lumotlar yoki indeksga asoslangan holda sozlashingiz mumkin.

var trips = d3.select("svg").selectAll("g.trips")
               .data(/*The data you were currently using for each path,
                       now gets to a group of paths */)
               .attr("class", "trips"); 
               //also set any other properties for the each trip as a whole

var pointSymbol = d3.svg.symbol().type(function(d,i){
                    if (i === 0) 
                        //this is the first point within its groups
                        return "cross";
                    if ( this === this.parentNode.querySelector("path:last-of-type") )
                        //this is the last point within its group
                        return "square";
                    //else:
                    return "circle";
               });


var points = trips.selectAll("path")
               .data(function(d) {
                   return get_activity_coords_(d.activities);
                   //return the array of point objects
                })
               .attr("transform", function(d){ 
                         /* calculate the position of the point using 
                            your projection function directly */
                })
               .attr("d", pointSymbol);

Birinchi va oxirgi nuqta uchun maxsus shakllarni o'rnatishga imkon beruvchi yana bir variant (lekin barcha vositachi nuqtalar bir xil bo'ladi) bu nuqtalarni bitta, ko'rinmas <path> elementning uchlari sifatida ulash va chiziq belgilarinuqta belgilarini chizish uchun.

Sizning yondashuvingiz quyidagicha bo'ladi:

  1. SVG-da <defs> elementini yarating (qattiq kodlangan yoki d3 bilan dinamik) va ulardagi boshlang'ich, o'rta va oxirgi marker nuqtalarini aniqlang. (Yo'llarni chizish uchun d3.svg.symbol() funksiyalaridan foydalanishingiz yoki o'zingiz qilishingiz yoki rasmlardan foydalanishingiz mumkin, bu sizga bog'liq.)

  2. Nuqta koordinatalari massivi asosida yo'lning "d" atributini yaratish uchun d3.svg.line() funksiyasidan foydalaning; chiziq uchun x va y qo'shimcha funktsiyalari o'sha nuqtaning koordinatalaridan x/y pozitsiyasini olish uchun xarita uchun foydalanayotgan proyeksiya funksiyasidan foydalanishi kerak. Proyeksiyani ikki marta hisoblashning oldini olish uchun siz prognoz qilingan koordinatalarni ma'lumotlar ob'ektida saqlashingiz mumkin:

     var multipointLine = d3.svg.line()
                      .x(function(d,i) {
                          d.projectedCoords = projection(d);
                          return d.projectedCoords[0];
                        })
                      .y(function(d){ return d.projectedCoords[1];});

    (Xarita funksiyasi sifatida chiziqlar chizish uchun d3.geo.path() funksiyasidan foydalana olmaysiz, chunki u xarita proyeksiyangizdagi uzunlik va kenglik chiziqlarining egri chiziqlariga mos kelish uchun chiziqni egri chiziqlarga ajratadi; chiziq belgilarini ishga tushirish uchun, yoʻl. nuqtalar orasidagi oddiy to'g'ri chiziqli aloqa bo'lishi kerak.)

  3. Ushbu yo'lda uslubni chiziq o'zi ko'rinmasligi uchun chiziqsiz va to'ldirishsiz qilib o'rnating, lekin keyin to'g'ri marker elementining id qiymatlariga murojaat qilish uchun chiziqdagi marker-start, marker-mid va marker-end xususiyatlarini o'rnating.

Ishni boshlash uchun bu erda chiziq belgilarini dinamik ravishda yaratish uchun d3 dan foydalanish misoli keltirilgan:
D3.svg.symboldan foydalanish mumkinmi? svg.marker bilan birga

person AmeliaBR    schedule 20.03.2014
comment
katta rahmat. Mening foydalanuvchi egri konnektorlarga ulangan, chunki ular taxminan ko'rsatadi. sayohat yo'li. Lekin chiziq belgilarini o'rganish va ular bilan ishlash yaxshi bo'ldi!! - person Dinesh; 20.03.2014