d3折れ線グラフをスムーズにするにはどうすればいいですか？

Question

私はd3折れ線グラフで小さな視覚的な問題があります。

たぶん、誰もがこのための短いソリューションを持っています

私は、彼らがよりスムーズに次の3つのラインを持っていると思います。

私はむしろ、このように見えるラインを持つようにしたい：

私はすでにそれがこの間違った視覚的な行動につながるストローク幅ではないことを、確認しました。

質問が不明な場合：基本的には、チャートの解像度を高くしたいのですが、それは大きなピクセルで構成されているようです。

これは、この結果につながるコード、次のとおりです。

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/

さらに制御SVGに.shape（）メソッド 形状レンダリングD3plus視覚化で生成されたすべての図形での描画キーを使用。 MDN

リソースをレンダリングするSVGの形状の詳細については

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

は：

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");