4

我有两种要导出的图表。我正在使用 SVG Crowbar，它在 Chrome 中运行良好，但在 Firefox 中它不会导出 CSS（而且我只是不会打扰 IE）。我决定将所有 CSS 转换为内联样式。但是，我遇到了 2 个问题（每个图表 1 个）。

在条形图中，我似乎无法应用“中风：黑色；” 只到轴，而不是轴标签。“中风：黑色”使标签变得模糊且没有吸引力。这是问题的 JSFiddle：http: //jsfiddle.net/UK8bw/10/。这是轴/标签的代码。我试图将它们分开，但没有成功。我在 CSS 部分中将相关的 CSS 注释掉了。

svg.append("g")
    .attr("class", "xAxis")
    .attr("fill", "none")
    .attr("stroke", "black")
    .style("shape-rendering", "crispEdges")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.6em")
    .attr("dy", "-0.195em")
    .attr("transform", function (d) {
        return "rotate(-90)"
    });  

svg.append("g")
    .attr("class", "yAxis")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("shape-rendering", "crispEdges")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Y-Axis Label");

我也有一个饼图。我设法将所有 CSS 样式转换为内联样式，但是我遇到了一个新问题。图例和图形本身显示在两个不同的 SVG 上。因此，我无法将它们都下载到一个文件中。有没有办法在同一个 SVG 上同时显示图表和图例？这是一个 JSFiddle：http: //jsfiddle.net/NYEaX/7/

4

1 回答 1

3

最简单的事情可能是明确设置您想要的样式，即

svg.append("g")
  .attr("class", "xAxis")
  .attr("fill", "none")
  .attr("stroke", "black")
  .style("shape-rendering", "crispEdges")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .selectAll("text")
  .style("fill", "black")
  .style("stroke", "none")
  .style("text-anchor", "end")
  .attr("dx", "-.6em")
  .attr("dy", "-0.195em")
  .attr("transform", function (d) {
    return "rotate(-90)"
  });

在这里更新了 jsfiddle 。

于 2013-06-28T18:42:36.147 回答