将 D3.js CSS 样式转换为内联样式答案

【问题标题】：Converting D3.js CSS Styles to Inline Styles将 D3.js CSS 样式转换为内联样式
【发布时间】：2013-06-26 08:59:08
【问题描述】：

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

在条形图中，我似乎无法应用“stroke: black;”只到轴，而不是轴标签。 “中风：黑色”使标签变得模糊且没有吸引力。这是问题的 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/

【问题讨论】：

最简单的可能就是重新设置你想要更改的样式，即.selectAll("text").style("stroke", "none")等
我设法找出了饼图的第二个问题。这是一个 JSFiddle，任何人都对此感兴趣：jsfiddle.net/NYEaX/8。不过，我仍在寻找第一个问题的答案。如果有人有修复，请发布！
@Kotthoff - 我尝试在末尾添加 svg.selectAll("text").style("stroke", "none") 行，但没有成功。我应该把代码放在哪里？
见这里：jsfiddle.net/UK8bw/11
非常感谢！我会赞成你的回答，但我没有足够的声誉。

标签： jquery css svg d3.js

【解决方案1】：

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

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.

【讨论】：