Что ж, в моем проекте я создаю линии рек из путей. И из-за моей большой ширины штриха он очень рваный:
Я уже искал вокруг. Но единственное, что я нашел, это stroke-linejoin: round;. Как вы можете видеть здесь:
это намного лучше, но я все еще не удовлетворен.
Есть ли способ получить действительно гладкую линию. Или, скажем, иметь еще более круглое соединение строк?
Интересным направлением является использование d3.svg.line для создания путей из координат вашего объекта geoJSON, после чего вы сможете использовать методы интерполяции D3.
См. D3js-Topojson: как перейти от пиксельных к кривым Безье? и Интерполяция геоданных в d3.svg.line Э. Микса и Хрустящие края с топожсоном? .
Изменить: существует минимальный отдельный пример сглаживания линий который вы можете разветвить через связанный с ним репозиторий git gist. Идея d3.svg.line вместе с интерполяцией y координат для сглаживания линий принадлежит E.Meeks. Э. Микс объясняет свой подход здесь.
Edit2 и решение: я вдруг вспомнил, где topojson на лету конвертируется в geojson. Делая следующее, вы можете работать с файлами топожсона и в конечном итоге получить кривые Безье с экстраполяцией по вашему выбору. Будет работать следующее:
d3.json("./world-110m.json", function(data){
console.log(data)
var geojson = topojson.feature(data, data.objects.countries);
var newJson = newgeoson(geojson);
console.log(JSON.stringify(newJson))
d3.select("body").append("svg").attr("id","world")
.selectAll("path")
.data(newJson)
.enter()
.append("path")
.style("stroke-width", 1)
.style("stroke", "black")
.style("fill-opacity", .5)
.attr("d", d3.svg.line()
.x(function(d){ return d[0] })
.y(function(d){ return d[1] }).interpolate("cardinal"))
.style("fill", "#7fc97f");
})
Живая демонстрация: Минимальное сглаживание линий d3js, версия topojson
console.log(JSON.stringify(d)) и проверьте данные. Общее решение готово, ваш код готов.
- person Hugolpz; 28.02.2015
Если вас не устраивает stroke-linejoin:round, вы можете изучить создание схемы пути ,
но, возможно, было бы проще, если бы вы попытались сгладить свой путь с помощью кубический Безье.
Если вы недовольны тем, как это выглядит, то мне кажется, что проблема в том, что ваша река определяется слишком малым количеством точек.
Любой метод, который вы используете для сглаживания пути, такой как алгоритм подгонки кривой, вероятно, приведет к тому, что представление вашей реки будет еще менее точным, чем то, что вы имеете сейчас.
