在闪亮的应用程序中使用 rCharts 修复标签

Question

我正在创建一个使用 rCharts 包的闪亮应用程序，我在将标签固定在图形的所有点上方时遇到问题。

library(rCharts)
age <- c(1:20)
tall <- seq(0.5, 1.90, length = 20)
name <- paste(letters[1:20], 1:20, sep = "")
df <- data.frame(age = age, tall = tall, name = name)
n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
n1$xAxis(axisLabel = "the age")
n1$yAxis(axisLabel = "the tall", width = 50)
n1$chart(tooltipContent = "#! function(key, x, y, e ){ 
  var d = e.series.values[e.pointIndex];
  return 'x: ' + x + '  y: ' + y + ' name: ' + d.name
} !#")
n1

比如这里，我想经常看到点上面的“name”，而不用鼠标越过！

提前谢谢你！

P.S : 是否可以使用带有闪亮的 clickme 包，我尝试了数千次但显然它不起作用？

Answer 1

对于闪亮 + clickme，请参阅 http://www.slideshare.net/nachocab/interactive-r-visualizations-using-shiny-and-clickme，但也要注意 rCharts 可以使用 http://mostlyconjecture.com/blog/ 中的自定义模板，然后可以使用 renderChart 或 renderChart2 轻松部署。

对于nvd3 标签问题，答案很快就会变得复杂。我们打算标准化其中的一些rCharts 行为，但我不确定这是否会是其中之一。但是，这可能会让您入门。要在演示中查看它，请参阅 here 或 live example。

    library(rCharts)
    age <- c(1:20)
    tall <- seq(0.5, 1.90, length = 20)
    name <- paste(letters[1:20], 1:20, sep = "")
    df <- data.frame(age = age, tall = tall, name = name)
    n1 <- nPlot(age ~ tall ,data = df, type = "scatterChart")
    n1$xAxis(axisLabel = "the age")
    n1$yAxis(axisLabel = "the tall", width = 50)
    #assuming you don't want tooltips if you have labels
    #change back to what you had if assumption incorrect
    n1$chart(tooltipContent = NULL)

    #grab template from
    #https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html
    #modify to add callback on graph render
    n1$setTemplate(script = sprintf("
      <script type='text/javascript'>
        $(document).ready(function(){
          draw{{chartId}}()
        });
      function draw{{chartId}}(){  
        var opts = {{{ opts }}},
        data = {{{ data }}}

        if(!(opts.type==='pieChart' || opts.type==='sparklinePlus' || opts.type==='bulletChart')) {
          var data = d3.nest()
          .key(function(d){
            //return opts.group === undefined ? 'main' : d[opts.group]
            //instead of main would think a better default is opts.x
            return opts.group === undefined ? opts.y : d[opts.group];
          })
          .entries(data);
        }

        if (opts.disabled != undefined){
          data.map(function(d, i){
            d.disabled = opts.disabled[i]
          })
        }

        nv.addGraph(function() {
          var chart = nv.models[opts.type]()
          .width(opts.width)
          .height(opts.height)

          if (opts.type != 'bulletChart'){
            chart
            .x(function(d) { return d[opts.x] })
            .y(function(d) { return d[opts.y] })
          }


    {{{ chart }}}

    {{{ xAxis }}}

    {{{ x2Axis }}}

    {{{ yAxis }}}

    d3.select('#' + opts.id)
    .append('svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
        },%s);
      };
    </script>
    "
    ,
    #here is where you can type your labelling function
    "
    function(){
      //for each circle or point that we have
      // add a text label with information
      d3.selectAll('.nv-group circle').each(function( ){
            d3.select(d3.select(this).node().parentNode).append('text')
              .datum( d3.select(this).data() )
              .text( function(d) {
                //you'll have access to data here so you can
                //pick and choose
                //as example just join all the info into one line
                return Object.keys(d[0]).map(function( key ){
                  return( key + ':' +  d[0][key] )
                }).join()
              })
              .attr('x',d3.select(this).attr('cx'))
              .attr('y',d3.select(this).attr('cy'))
              .style('pointer-events','none')
          })
    }
    "
    ))

    n1