我有两种试图导出的图形。我正在使用SVG Crowbar,它在Chrome浏览器中运行良好,但是在Firefox中,它不随CSS一起导出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/

最佳答案

最简单的方法可能是显式设置您想要的样式,即

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 here

10-05 20:41
查看更多