如何使用 rCharts、dPlot 和凹坑更改轴标题答案

【问题标题】：How to change the axis title with rCharts, dPlot and dimple如何使用 rCharts、dPlot 和凹坑更改轴标题
【发布时间】：2014-04-05 01:15:45
【问题描述】：

如何更改使用 rCharts 和 dimple.js 库生成的绘图的轴标题？例如：

library(rCharts)
data(mtcars)
mtcars.df <- data.frame( car = rownames(mtcars), mtcars )
d1 <- dPlot(x ="disp", y="mpg", groups=c("car", "cyl"), type ="point", data=mtcars.df)
d1$xAxis( type = "addMeasureAxis")
d1

想要的效果是将变量名“disp”替换为更完整的一段文字作为轴标题。我尝试向 d1$xAxis() 行添加参数，例如 title="Displacement" 和 label="Displacement: 但没有成功。

【问题讨论】：

标签： r rcharts dimple.js

【解决方案1】：

抱歉，我才看到这个。感谢约翰的回答。

使用 rCharts，我们可以利用 afterScript 模板来添加它。如果 DOM 中只有一个图表，我们可以不加修改地使用 John 的示例。

d1$setTemplate(
  afterScript = 
  '
    d3.selectAll(".axis.title")
    .text(function () {
      var t = d3.select(this).text();
      if (t === "disp") {
          return "Displacement";
      } else if (t === "mpg") {
          return "Miles Per Gallon";
      } else {
          return t;
      }
    }); 
  '
)

如果您想要一个在 DOM 中包含多个图表的示例，或者这不适合您，请告诉我。谢谢。

【讨论】：

【解决方案2】：

Dimple 目前不公开标题，但它会在下一个版本中推出。一旦完成，我确信 rcharts 中的凹坑实现背后的伟大人物会将它们添加到库中。我不太确定这如何与 R 实现一起使用，但如果您可以在图表呈现后运行一些 Javascript，您可以使用一些原始 d3 修改标题：

d3.selectAll(".axis.title")
    .text(function () {
        var t = d3.select(this).text();
        return (t === "disp" ? "Displacement" : t);
    });

如果你想扩展它来替换几个标题，你可以这样做：

d3.selectAll(".axis.title")
    .text(function () {
        var t = d3.select(this).text();
        if (t === "disp") {
            return "Displacement";
        } else if (t === "mpg") {
            return "Miles Per Gallon";
        } else {
            return t;
        }
    });

我希望这会有所帮助。

【讨论】：

【解决方案3】：

这是另一种方式：

# devtools::install_github("rCharts", "ramnathv", ref = "dev")
library(rCharts)
data(mtcars)
mtcars.df <- data.frame( car = rownames(mtcars), mtcars )
d1 <- dPlot(x ="disp", y="mpg", groups=c("car", "cyl"), type ="point", data=mtcars.df)
d1$xAxis( type = "addMeasureAxis")
d1

d1$setTemplate(afterScript = "
  <script>
    myChart.draw()
    myChart.axes[0].titleShape.text('Displacement')
    myChart.axes[1].titleShape.text('Miles Per Gallon')
    myChart.svg.append('text')
        .attr('x', 40)
        .attr('y', 20)
        .text('Plot of Miles Per Gallon / Displacement')
        .style('text-anchor','beginning')
        .style('font-size', '100%')
        .style('font-family','sans-serif')
  </script>               
")
d1

截图：

向拉姆纳特致敬：R: interactive plots (tooltips): rCharts dimple plot: formatting axis

【讨论】：