用D3畫外虛線

我一直在想弄清楚如何用D3.js畫出如下例子那樣的虛線。有關我如何完成此任務的任何提示？用D3畫外虛線

編輯： 我這樣做有地圖，所以我不能只創建，因爲它們是在地圖數據定義我自己行。我能否以某種方式在偏移量上畫兩條線？

2016-01-06 Espen

爲虛線描邊的兩條線繪製折線或路徑。 –

我實際上是試圖在地圖中繪製它，所以我不能手動製作自己的折線/路徑。我想我需要用偏移量以某種方式繪製兩次？ – Espen

您可能需要提供小提琴。如果它是一個像折線圖那樣定義的線，那很容易。但是，如果您的繪圖像道路或步行路徑，那麼自從使用'd3.geo.path（）'而不是'd3.svg.line（）'後，您需要採用不同的方法。我們可能需要更多的細節才能夠提供幫助。 –

不完全如您所需

我試圖解決這個問題，使用svg中的模式。

首先內部創建一個DEF並做出圖案是這樣的：

<svg width="1000" height="1000"> 
    <defs> 
    <pattern id="cyril" patternUnits="userSpaceOnUse" width="4" height="4"> 
     <path d="M 2, 0 l 0, 4" stroke-width="1" shape-rendering="crispEdges" stroke="darkorange" stroke-linecap="square"></path> 
     <path d="M 0,2 l 4,0" stroke-width="1" shape-rendering="crispEdges" stroke="darkorange" stroke-linecap="square"></path> 
    </pattern> 
    </defs> 
</svg>

現在做一個複雜的路徑，並用這樣的

svg 
    .append("path") 
    .attr("d", "M 100 350 q 150 -300 300 0") 
    .attr("stroke", "url(#cyril)") 
    .style("stroke-width", "10") 
    .style("fill", "none");

工作代碼here

的圖案填充行程

希望這有助於！

來源

2016-01-06 11:44:35 Cyril

該解決方案的問題是填充整條線而不僅僅是輪廓。 Mayby有使用模式掩蓋中心的方法嗎？ – Espen

是的，你是對的這不是一個解決方案。我嘗試了一些想法分享它所有:) – Cyril

回答

相關問題