使SVG路径像一条平滑的线，而不是参差不齐 [英] Making a SVG path like a smooth line instead of being ragged

问题描述

在我的项目中，我从路径创建了河水线.而且由于我的大笔划宽度，它非常衣衫:

Well in my project I create river lines from pathes. And due to my kind of big stroke-width it is very ragged:

我已经搜索了.但是我发现的唯一是stroke-linejoin: round;.如您所见:

I already searched around. But the only thing I found was stroke-linejoin: round;. As you can see here:

情况更好，但我仍然不满意.

it is way better but I'm still not satisfied.

有什么方法可以使线条流畅.还是也有一个更圆"的线连接?

Is there any way to get a really smooth line. Or let's say too have a even "rounder" linejoin?

推荐答案

一个有趣的方向是利用d3.svg.line从geoJSON特征的坐标生成路径，此时您将能够使用D3的插值方法.

An interesting direction is to leverage d3.svg.line to generate paths from the coordinates of your geoJSON feature, at which point you would be able to use D3's interpolate methods.

请参见 D3js-Topojson:如何从像素化曲线移动到贝塞尔曲线?和与topojson的脆皮边缘?.

:有一个最小的独立案例，用于线路平滑，则可以通过其关联的gist的git存储库进行分叉. d3.svg.line和y坐标的插值一起进行线平滑的想法来自E.Meeks. E. Meeks在此处解释了他的方法.

There is a minimal stand alone case study for line smoothing that you can fork via its associated gist's git repository. The idea of d3.svg.line together with interpolations of y coordinates for lines smoothing is from E.Meeks. E. Meeks explains his approach here.

Edit2&解决方案::Í突然想起了将topojson即时转换为geojson的位置.执行以下操作，您可以使用topojson文件并通过选择的外推法最终获得贝塞尔曲线.以下将起作用:

Edit2 & solution: Í suddenly remembered where topojson is converted into geojson on the fly. Doing the following, you can work with topojson files and eventually get bezier curves, with the extrapolation of your choice. The following will work:

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版本

Live demo : Minimal d3js line smoothing, topojson version

这篇关于使SVG路径像一条平滑的线，而不是参差不齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！