Question

我正在测试使用d3.js库（http://tenxer.github.com/xcharts）的xCharts，但是当我尝试在我的网站和jsfiddle上渲染图表时，文本模糊不清。您可以在下面看到它的外观。

这是我正在使用的代码。

 (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

两个问题：

轴的刻度线正在消除锯齿，因此它们显示为两个像素宽。通过将shape-rendering:crispEdges添加到轴的CSS类 - 或添加到整个图表，如果您愿意 - 可以禁用抗锯齿。您可以通过Scott Murray在great tutorial中了解更多相关信息。
文本似乎应用了一个笔划（它可能来自您的代码或来自您的css，或来自默认值）。给它CSS stroke: none是一种处理它的方法。

Answer 2

在xchart.css中找到.xchart .axis text选择器并添加stroke-width: 0;规则

xCharts - 文本渲染模糊

2 个答案: