D3 текст в виде рекламной этикетки?

Question

Добрый день, друзья! Я пытаюсь объединить leaflet.js и d3.js для обозначения объектов, которые я переписываю. Но есть некоторые вопросы: 1) как путь метки? 2) как линия линий вдоль? 3) voroni этикетка (я думаю, что ответить на 2 вопроса заставило меня^_ ^)

Итак, есть мой код с большим количеством ошибок

var drawStyle = options.drawStyleOptions; 
    searchLayer = L.geoJson(features[index].geojson, { 
     style: drawStyle, 
     onEachFeature: function (feature, layer) { 
      layer.bindPopup(features[index].display_name); 
     } 
    }); 

    map.addLayer(searchLayer); 
    if (features[index].geojson.type === "Point" && options.pointGeometryZoomLevel !== -1) { 
     map.setView([features[index].geojson.coordinates[1], features[index].geojson.coordinates[0]], options.pointGeometryZoomLevel); 
    } 
    else { 
     map.fitBounds(searchLayer.getBounds()); 
     var path = d3.select("path") 
      .attr("id", "#wavy") 
     //Create an SVG text element and append a textPath element 
     path.append("text") 
      .append("textPath") //append a textPath to the text element 
      .attr("xlink:href", "#wavy") //place the ID of the path here 
      .style("text-anchor","middle") //place the text halfway on the arc 
      .attr("startOffset", "50%")  
      .text("Yay, my text is on a wavy path"); 
    } 
    return searchLayer; 

Кто-нибудь знает, как маркировать особенности [индекс]. отображаемое имя???? Кроме того, я знаю, что это должно быть довольно просто ((( я нашел некоторую информацию о маркировке вдоль линии: http://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html

это мой SVG элемент

<svg pointer-events="none" class="leaflet-zoom-animated" width="1674" height="463" viewBox="-139 -39 1674 463" style="transform: translate3d(-139px, -39px, 0px) scale(1);"> 
    <g> 
    <path class="leaflet-interactive" stroke="blue" stroke-opacity="0.65" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red" fill-opacity="0.2" fill-rule="evenodd" pointer-events="visiblePainted" d="M549 206L558 200L561 190L564 189L567 180L574 173L573 172L579 172L583 174L586 171L594 169L594 167L599 164L598 165L600 169L603 170L603 172L605 172L605 170L609 170L615 165L623 162L645 160L645 158L650 155L650 153L656 146L650 142L654 138L670 138L675 137L677 135L687 135L689 131L690 132L695 129L699 121L701 121L701 119L704 116L708 116L709 112L715 108L716 100L722 98L722 96L726 96L729 93L735 92L741 94L744 97L744 99L747 100L752 105L760 118L760 128L755 136L755 138L758 139L756 145L772 145L773 148L770 153L772 155L787 157L787 159L796 166L797 169L795 173L797 173L801 179L802 178L810 182L820 192L822 192L820 194L820 198L824 202L826 202L824 206L825 205L828 208L831 207L841 215L842 225L846 229L845 230L845 228L838 225L832 229L824 229L817 224L809 226L802 221L800 223L799 222L797 224L798 227L791 232L789 230L787 232L783 232L776 227L776 229L773 230L773 232L772 231L770 233L769 232L760 235L753 239L742 234L742 236L738 238L738 242L735 243L736 244L734 248L732 250L726 250L724 248L716 246L703 246L700 243L689 244L685 236L675 230L674 231L673 228L662 227L655 232L655 234L646 245L643 245L646 254L644 256L645 265L641 261L635 265L633 263L627 263L619 259L616 262L615 261L608 264L601 263L598 266L596 272L597 279L589 294L587 288L586 275L574 264L564 252L566 252L563 243L561 243L556 238L555 225L552 224L554 218L554 210L551 209L549 206z"> 
    </path> 
    </g> 
    </svg> 

Answer 1

Вы можете использовать текстовый путь, чтобы написать текст по пути:

Представьте, что вы есть SVG этот путь:

<svg pointer-events="none" class="leaflet-zoom-animated" width="1674" height="463" viewBox="-139 -39 1674 463" style="transform: translate3d(-139px, -39px, 0px) scale(1);"> 
    <g> 
     <path id="mypath" class="leaflet-interactive" stroke="blue" stroke-opacity="0.65" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red" fill-opacity="0.2" fill-rule="evenodd" pointer-events="visiblePainted" d="M549 206L558 200L561 190L564 189L567 180L574 173L573 172L579 172L583 174L586 171L594 169L594 167L599 164L598 165L600 169L603 170L603 172L605 172L605 170L609 170L615 165L623 162L645 160L645 158L650 155L650 153L656 146L650 142L654 138L670 138L675 137L677 135L687 135L689 131L690 132L695 129L699 121L701 121L701 119L704 116L708 116L709 112L715 108L716 100L722 98L722 96L726 96L729 93L735 92L741 94L744 97L744 99L747 100L752 105L760 118L760 128L755 136L755 138L758 139L756 145L772 145L773 148L770 153L772 155L787 157L787 159L796 166L797 169L795 173L797 173L801 179L802 178L810 182L820 192L822 192L820 194L820 198L824 202L826 202L824 206L825 205L828 208L831 207L841 215L842 225L846 229L845 230L845 228L838 225L832 229L824 229L817 224L809 226L802 221L800 223L799 222L797 224L798 227L791 232L789 230L787 232L783 232L776 227L776 229L773 230L773 232L772 231L770 233L769 232L760 235L753 239L742 234L742 236L738 238L738 242L735 243L736 244L734 248L732 250L726 250L724 248L716 246L703 246L700 243L689 244L685 236L675 230L674 231L673 228L662 227L655 232L655 234L646 245L643 245L646 254L644 256L645 265L641 261L635 265L633 263L627 263L619 259L616 262L615 261L608 264L601 263L598 266L596 272L597 279L589 294L587 288L586 275L574 264L564 252L566 252L563 243L561 243L556 238L555 225L552 224L554 218L554 210L551 209L549 206z"> 
     </path> 
    </g> 
    </svg> 

Дайте идентификатор в path = mypath

Далее я использую D3 для добавления текста этого пути:

d3.select("svg").append("text") 
    .append("textPath") //append a textPath to the text element 
    .attr("xlink:href", "#mypath") //place the ID of the path here 
    .text("Hello World"); 

here Рабочего пример

Надеется, что это помогает!