我有两种试图导出的图形。我正在使用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。