d3.js - xCharts - テキストのレンダリングがぼやけている

Question

d3.js ライブラリ ( http://tenxer.github.com/xcharts )を使用する xCharts をテストしていますが、自分の Web サイトと jsfiddle でグラフをレンダリングしようとすると、テキストがぼやけます。以下で、どのように異なるかを確認できます。

http://jsfiddle.net/JsPxx/

これは私が使用しているコードです。

 (function () {

      var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
      var myChart = new xChart('bar', data, '#myChart');

    }());

（ http://tenxer.github.com/xchartsのように）なぜそれが本来のように見えないのかについての助けをいただければ幸いです/

Answer 1

2 つの問題:

1. 軸の目盛り線はアンチエイリアス処理されているため、2 ピクセル幅で表示されます。軸の CSS クラス (必要に応じてチャート全体)に追加shape-rendering:crispEdgesすることで、アンチエイリアスを無効にすることができます。詳細については、Scott Murray によるすばらしいチュートリアルをご覧ください。

2. テキストにストロークが適用されているようです (コード、CSS、またはデフォルトから来ている可能性があります)。CSS を与えることstroke: noneは、それを処理する 1 つの方法です。

Answer 2

xchart.css でセレクターを見つけてルール.xchart .axis textを追加するstroke-width: 0;