- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
friend 们,你们好!我正在尝试联合 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;
有谁知道如何通过 features[index].display_name 进行标记????我也知道这应该很容易(((我发现了一些关于沿线标注的信息: 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>
最佳答案
您可以使用文本路径沿着路径写入文本:
假设您有这样的 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
一个id
接下来我使用 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
希望这对您有所帮助!
关于javascript - D3 文本作为传单标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35126610/
表架构 DROP TABLE bla; CREATE TABLE bla (id INTEGER, city INTEGER, year_ INTEGER, month_ INTEGER, val I
我需要拆分字符串/或从具有以下结构的字符串中获取更容易的子字符串。 字符串将来自 window.location.pathname 或 window.location.href,看起来像 text/n
每当将对象添加到数组中时,我都会尝试更新 TextView ,并在 TextView 中显示该文本,如下所示: "object 1" "object 2" 问题是,每次将新对象添加到数组时,它都会覆盖
我目前正在寻找使用 Java 读取网站可见文本并将其存储为纯文本字符串的方法。 换句话说,我想转换成这样: Hello stupid World进入“ Hello World ” 或者类似的东西 Un
我正在尝试以文本和 HTML 格式发送电子邮件,但无法正确发送正确的 header 。特别是,我想设置 Content-Type header ,但我找不到如何为 html 和文本部分单独设置它。 这
我尝试了上面的代码,但我无法绑定(bind)文本,我怎样才能将资源内部文本 bloc
我刚刚完成了 Space Shooter 教程,由于没有 GUIText 对象,所以我创建了 UI.Text 对象并进行了相应的编码。它在统一播放器中有效,但在构建 Web 应用程序后无效。我花了一段
我有这个代码: - (IBAction)setButtonPressed:(id)sender { NSUserDefaults *sharedDefaults = [[NSUserDefau
抱歉标题含糊不清,但我想不出我想在标题中做什么。无论如何,对于图像上的文本,我使用了 JLabel 文本并将其添加到图标中。 JLabel icon = new JLabel(new Imag
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我在将 Twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。 我遇到的问题是推文不是我的自定义字体... 这是我无法使用任何 css 定位的 HTML 代码,我正
我正在尝试找到解决由于使用以下形式的代码而导致的冗余字符串连接问题的最佳方法: logger.debug("Entering loop, arg is: " + arg) // @1 在大多数情况下,
我写了这个测试 @Test public void removeRequestTextFromRouteError() throws Exception { String input = "F
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[文本],并且需要获取文本。字符串可能类似于:something &[text] &[text] everything &[text] 等
有没有办法将标题文本从一个词变形为另一个词,同时保留两个词中使用的字母?我看过的许多 css 文本动画大多是视觉的,很少有旋转整个单词的。 我想要做的是从一个词过渡,例如“BEACH”到“CHANGE
总结matplotlib绘图如何设置坐标轴刻度大小和刻度。 上代码: ?
我在容器 (1) 中创建了容器 (2)。你能帮忙如何向容器(1)添加文本吗?下面是我的代码 return Scaffold( body: Padding( padding: c
我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量,并想创建一个带有渐变作为其“颜色”的文本,并在其周围设置渐变轮廓/描边 到目前为止,我还没有看到任何将两者结合在一起的东西。 我可以自
我正在为视频游戏暗黑破坏神 2 使用 discord.py 构建一个不和谐机器人。其中一项功能要求机器人从暗黑破坏神 2 屏幕截图中提取项目的名称和属性。我目前正在为此使用 pytesseract,但
我很难弄清楚如何旋转 strip.text theme 中的属性来自 ggplot2 .我使用的是 R 版本 3.4.2 和 ggplot2 版本 2.2.1。 以下是 MWE 的数据。 > dput
我是一名优秀的程序员,十分优秀!