如何使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/

使用在.shape（）方法来进一步控制在一个D3plus可视化生成的SVG 形状渲染上所有形状渲染键。

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

对SVG的形状渲染MDN

资源的更多细节：

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

Answer 2

的问题是很容易解决：

我有内D3声明我的代码，多次添加相同的图。其实我的数据集内的数据项，这是由于此代码段的数量：

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

结果现在是：

我基本上不得不改变是全部更换温度变量与克，这是当前的临时的父和SVG的子：

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) 
     } 
    }); 
    g.append("path") 
     .attr("id", "avgtemp") 
     .attr("class", "line") 
     .attr("d", function(d) { 
      return line(values); 
     }) 
    g.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) 
     } 
    }); 
    g.append("path") 
     .attr("id", "mintemp") 
     .attr("class", "line") 
     .attr("d", function(d) { 
      return line(values); 
     }) 
    g.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) 
     } 
    }); 
    g.append("path") 
     .attr("id", "maxtemp") 
     .attr("class", "line") 
     .attr("d", function(d) { 
      return line(values); 
     }) 
    g.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");