D3JS缩放和转换性能 [英] D3JS scaling and transition performance
问题描述
我有一些代码来缩放和翻译D3的地图，但性能是相当可怕的。缩放和平移时，刷新需要近3秒钟。我认为地图看起来更好包括所有县的线边界，但在6MB +我怀疑这可能是瓶颈来自哪里。有没有另一种方式，我应该处理的变换或者一种方法来优化地图数据？ D3真的不适合这种水平的细节吗？非常新的D3。
I have some code to scale and translate a map in D3 but the performance is quite terrible. When zooming and panning, it's taking nearly 3 seconds for a refresh. I thought the map would look nicer including line boundaries for all the counties, but at 6MB+ I suspect this may be where the bottleneck is coming from. Is there another way I should be handling the transforms or maybe a way to optimize the map data? Is D3 really not suited to this level of detail? Very new to D3.
我使用来自这里的形状文件，使用QGIS从DBF转换为Geojson：
https://www.census.gov/cgi-bin/geo/shapefiles2010/main
I'm using shape files from here, converted from DBF to Geojson using QGIS: https://www.census.gov/cgi-bin/geo/shapefiles2010/main
<!doctype html>
<html>
<head>
<title>d3 map</title>
<script src="http://d3js.org/d3.v3.min.js">
</script>
</head>
<body>
<script>
var width = 800;
var height = 600;
var projection = d3.geo.mercator();
var path = d3.geo.path().projection (projection);
var canvas = d3.select ("body")
.append ("svg")
.attr ("width", width)
.attr ("height", height)
var zoomVar = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height, 60 * height])
.on("zoom", onPostZoom);
var hotbox = canvas.append("g").call(zoomVar);
hotbox.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("fill", "white")
.attr("height", height);
d3.json ("cali.geojson", function (data)
{
hotbox.append("g")
.attr("id", "geometry")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "steelblue")
.on("click", onClick);
})
function onClick (d)
{
var centroid = path.centroid(d), translate = projection.translate();
projection.translate(
[translate[0] - centroid[0] + width / 2,
translate[1] - centroid[1] + height / 2 ]);
zoomVar.translate(projection.translate());
hotbox.selectAll("path").transition()
.duration(700)
.attr("d", path);
}
function onPostZoom()
{
projection.translate(d3.event.translate).scale(d3.event.scale);
hotbox.selectAll("path").attr("d", path);
}
</script>
</body>
</html>
推荐答案
您遇到的问题不是真的的D3，但是因为浏览器。主要的瓶颈是渲染所有的可视元素，而不是计算它们的位置等。
The problem you're experiencing isn't really because of D3, but because of the browser. The main bottleneck is rendering all the visual elements, not computing their positions etc.
避免这种情况的唯一方法是减少数据。开始的一种方法是简化QGIS中的边界，使用例如 dpsimplify 插件。
The only way to avoid this is to have less data. One way to start would be to simplify the boundaries in QGIS, using e.g. the dpsimplify plugin.
这篇关于D3JS缩放和转换性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
