javascript - 如何使d3折线图中的线条更平滑？

Question

我的 d3 折线图有一个小的视觉问题。

也许有人对此有一个简短的解决方案:

我想让下面的三行比它们更平滑。

我宁愿让线条看起来像这样:

我已经检查过，导致这种错误视觉行为的不是笔画宽度。

如果问题不清楚:基本上，我想获得更高的图表分辨率，看起来它由更大的像素组成。

这是导致此结果的代码:

var temp = g.selectAll(".temp")
        .data(stationData)
        .enter().append("g")
        .attr("class", "temp");

    let values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.avgtemp)
        }
    });
    temp.append("path")
        .attr("id", "avgtemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Avg Temperature");


    values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.mintemp)
        }
    });
    temp.append("path")
        .attr("id", "mintemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Min Temp");

    values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.maxtemp)
        }
    });
    temp.append("path")
        .attr("id", "maxtemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Max Temp");

Answer 1

这是因为您生成的 SVG 的 shape-rendering 属性。

http://d3plus.org/examples/advanced/248b7a374015f95790eb/

Use the rendering key in the .shape() method to further control SVG shape-rendering on all shapes generated in a D3plus visualization.

.shape({
      "rendering":"optimizeSpeed" // fine-tune SVG shape rendering
    })

有关 SVG 形状渲染的更多详细信息 MDN

资源:

https://coderwall.com/p/ufldzw/for-crisp-edges-use-anything-but-crispedges