在D3.js/GeoJSON/TopoJSON/Shapefile中平滑圓弧/繪圖點

我一直在尋找答案，但我一直未能弄明白。在D3.js/GeoJSON/TopoJSON/Shapefile中平滑圓弧/繪圖點

我最終從基於網格的數據（GRIB文件）創建一個TopoJSON文件。
我可以非常容易地將數據內插到更細的分辨率網格中，因此繪圖點在縮小時會出現平滑，但放大時不可避免地會看到塊狀網格點。
我也研究過簡化，它確實幫助有點但它不是很平滑。
我使用D3來渲染數據。
這是可以在前端完成的東西，還是應該/可以在原始的TopoJSON數據中完成？
我基本上不希望你能夠知道它是一個網格，即使你放大10,000％。
這裏是什麼，我以後是一個例子：

enter image description here

2015-04-01 stewart715

相關文章[使SVG路徑像一條流暢的線條而不是破爛不前]（http://stackoverflow.com/questions/28638327/） – Hugolpz 2015-04-01 19:30:01

任何時候你需要連續平滑線條的所有決議，你的選擇基本上歸結爲大文件或SVG。我期望這個解決方案將採取簡化的數據並將其轉換爲SVG，並在角落四捨五入來實現預期的效果。 – brichins 2015-04-07 21:14:31

此外，作爲一名土木工程師，我首先會問爲什麼這是必需的 - 它意味着數據集中不存在的準確性水平，對於我處理的大多數問題，誇大準確性是一個嚴重的問題問題。根據您的使用情況，如果這可能會誤導用戶並導致錯誤的結論，則這可能是不好的做法。我個人比較喜歡顯示（例如）一些塊狀圖，以便在視覺上代表「+/- 5英尺」，而不是完美的，可能落在屬性角落錯誤一側的0寬度線。 – brichins 2015-04-07 21:19:41

是這可以在前端完成，或者應該/可以在原始階段完成TopoJSON數據？

這是應該在前端完成的事情。如果您在將數據寫入JSON文件之前先平滑數據，則該文件將變得毫無用處。

來源

2015-07-30 14:55:24 Sam

我接受這個，因爲這基本上是我找到的。算法需要在前端執行此操作，否則文件大小將非同尋常。有了D3/topojson，目前沒有功能可以正確地做到這一點。必須手卷。 – stewart715 2015-07-30 15:36:15

此外，當在前端完成時，可以懶惰地執行插值 - 如果用戶沒有放大，則不需要執行插值。 – Sam 2015-07-30 15:42:36

也可能值得指出一個明顯的說法：GeoJSON/Topojson不支持貝塞爾曲線。因此，這種格式的平滑曲線實際上是形成曲線的許多直線。因此，如果您決定將其燒成原始數據，則文件大小較大。 – stewart715 2015-07-30 17:20:12

也許d3 line.interpolate()是你在找什麼？

來源

2015-04-16 19:39:55 vtosh

這是爲了平滑線條而不是路徑。 – stewart715 2015-04-21 13:29:08

如果您使用D3.js，而你用線工作，內置的內插（）函數是要走的路。

這裏是D3的line.interpolate的工作示例（）使用「紅衣主教」平滑：

example of D3's line.interpolate()

下面的代碼：

var margin = { 
    top: 30, 
    right: 20, 
    bottom: 30, 
    left: 50 
    }, 
    width = 600 - margin.left - margin.right, 
    height = 270 - margin.top - margin.bottom; 
// Parse the date/time 
var parseDate = d3.time.format("%d-%b-%y").parse; 
// Set the ranges 
var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 
// Define the axes 
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5); 
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5); 

// Define the line 
var valueline = d3.svg.line() 
    .interpolate("cardinal") 
    .x(function(d) { 
    return x(d.date); 
    }) 
    .y(function(d) { 
    return y(d.close); 
    }); 

// Adds the svg canvas 
var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
    "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.json('https://api.myjson.com/bins/175jl', function(error, data) { 
    data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.close = +d.close; 
    }); 
    // Scale the range of the data 
    // Starting with a basic graph 14 
    x.domain(d3.extent(data, function(d) { 
    return d.date; 
    })); 
    y.domain([0, d3.max(data, function(d) { 
    return d.close; 
    })]); 
    // Add the valueline path. 
    svg.append("path") 
    .attr("class", "line") 
    .attr("d", valueline(data)); 
    // Add the X Axis 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 
    // Add the Y Axis 
    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 
});

來源

2015-04-27 21:37:24 Grace

謝謝，但topojson附加路徑，而不是行。標準插值/平滑不幸運。 – stewart715 2015-04-28 13:08:40

在D3.js/GeoJSON/TopoJSON/Shapefile中平滑圓弧/繪圖點

回答

相關問題