如何使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");