D3：合并内部svg路径？ [英] D3: Merge interior svg paths?

问题描述

我有一个 svg 元素，由许多不同的 path 对象组成，每个对象代表一个美国状态。

< a href =http://jsfiddle.net/jGjZ2/ =noreferrer> http://jsfiddle.net/jGjZ2/

我想将东部地区（黄金）合并成一个没有可见分割的单一路径对象。

最终结果应该是这样的（忽略不准确的地方）：

我是使用D3。
没有GeoJSON或TopoJSON数据 - 地图是svg直接嵌入html（见jsfiddle）。

非常感谢！

$ b假设你可以忽略操作现有SVG图像的规定限制（这似乎是一个任意的限制，给定的制图边界的可用性更容易 - 要操纵格式...），您可以使用

另一种简单方法只是两次绘制突出显示的多边形：一次使用粗黑色笔触，没有填充，第二次在顶部使用橙色填充，没有笔触。这可以实现相同的效果，而不需要进行拓扑操作：

我想如果你真的有到，你可以达到SVG元素，并通过提取矢量数据做同样的事情，但如果从干净的数据开始，它会更容易。

I have an svg element composed of many different path objects, each of which represents one U.S state.

http://jsfiddle.net/jGjZ2/

I would like to merge the east territory (gold) into a single path object with no visible divisions.

The end result should look like this (ignore the inaccuracies):

I am using D3. There is no GeoJSON or TopoJSON data - the map is svg directly embedded in html (see jsfiddle).

Thanks a lot!

解决方案

Assuming you can ignore the stated restriction of manipulating an existing SVG image (which seems like an arbitrary restriction given the ready availability of cartographic boundaries in more easy-to-manipulate formats…), you can use topojson.mesh to merge multiple polygons. Though, note this approach has a few limitations as described in this example:

Another simple approach is to just draw the highlighted polygons twice: once with a thick black stroke and no fill, and a second time on top with orange fill and no stroke. This achieves the same effect without any need for topological manipulation:

I suppose if you really had to, you could reach into the SVG element and do the same thing by extracting the vector data, but it will be easier if you start from clean data.

这篇关于D3：合并内部svg路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！