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

时间:2014-07-22 09:30:36

标签: r plot rcharts

我正在创建一个闪亮的应用程序,我使用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

例如,我想经常看到&#34; name&#34;以上几点,而不必用鼠标来传递!

提前谢谢!

P.S:是否可以使用带有光泽的clickme包,我尝试了数千次,但显然它不起作用?

1 个答案:

答案 0 :(得分:2)

for shiny + clickme请参阅http://www.slideshare.net/nachocab/interactive-r-visualizations-using-shiny-and-clickme,但也要注意rCharts可以使用http://mostlyconjecture.com/blog/中的自定义模板,然后可以使用renderChartrenderChart2轻松部署这些模板。

对于nvd3标签问题,答案很快就变得复杂了。我们打算将其中一些rCharts行为标准化,但我不确定这将是一个。但是,这可能会让你开始。要在演示中查看,请参阅herelive 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
相关问题