在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中平滑圆弧/绘图点

回答

相关问题