在rCharts中改变线条类型NVD3（nPlot）

我想在nPlot创建的情节中为一个因子（分组变量）的不同级别设置实线和虚线。有什么建议么？在rCharts中改变线条类型NVD3（nPlot）

library(reshape2) 
library(ggplot2) 
library(rCharts) 

ecm <- reshape2::melt(economics[,c('date', 'uempmed', 'psavert')], id = 'date') 
p7 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'lineWithFocusChart')

最终结果：

uempmed (solid line) and psavert (dashed line)

另一个选项可以是改变线条的粗细来代替。

来源

2014-07-24 user3874377

不幸的是nvd3已停滞不前。这是一个很好的例子，其中一个pull request将允许指定线条的粗细和虚线样式没有注意到。

这是潜在地解决您的问题的困难方法。我们将需要修改标准rCharts脚本模板以为线条样式添加回调函数。看到这里的rCharts demo和live code example。

options(viewer=NULL) 

    library(reshape2) 
    library(ggplot2) 
    library(rCharts) 

    ecm <- reshape2::melt(economics[,c('date', 'uempmed', 'psavert')], id = 'date') 
    p7 <- nPlot(value ~ date, group = 'variable', data = ecm, type = 'lineWithFocusChart') 


    #grab template from 
    #https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html 
    #modify to add callback on graph render 

    p7$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 }}} 

    //on legend click, line might be deleted 
    //when redrawn we need to make dashed again 
    chart.legend.dispatch.on('legendClick', dashedAfterLegend) 

    function dashedAfterLegend(){ 
    //to make dashed we need to make sure it is drawn first 
    //not a js expert so might not be best way to handle 
    window.setTimeout(function dashedDelay(){ 
     makeDashed(opts) 
    } , 400) 
    } 

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

    nv.utils.windowResize(chart.update); 
    return chart; 
     },%s); 
    }; 
    %s 
    </script> 
    " 
    , 
    #here is where you can type your line styling function 
    "function(){ makeDashed(opts) } " 

    # here is the part that was in afterScript but moved to work with shiny 
    #see this article for help on dashed d3 lines 
    #http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html 
    ," 
    function makeDashed(opts){ 
    // select all the lines with d3 both main plot and focus 
    // see this article for help on dashed d3 lines 
    // http://www.d3noob.org/2013/01/making-dashed-line-in-d3js.html 
    d3.select('#' + opts.id).selectAll('.nv-linesWrap .nv-group') 
     .filter(function(g){return g.key== 'psavert'}) 
     .selectAll('.nv-line') 
     .style('stroke-dasharray', ('3, 3')) 
    } 
    " 

)) 
    p7

我明白，这是一个很大的Javascript问A R用户，所以请让我知道如果任何这是没有意义的。

来源

2014-07-25 16:31:29 timelyportfolio

这是惊人的，它完美的作品！任何想法如何解决这个[其他问题与相同的数据集？]（http://stackoverflow.com/questions/24944151/add-vertical -line-to-line-chart-in-rchart-nvd3-nplot） – user3874377

另一个更加困难。我画线条和标签，但现在我试图确保在放大或缩小时更新它们。 – timelyportfolio

更新后的代码在传说中点击点击 – timelyportfolio

var dasheddesign=['10,20','5,5' ,'30,30','20,10,5,5,5,10'];   
d3.select('#chart1 svg') 
    .datum(data) 
    .call(chart) 
    .call(function(){ 
d3.select('#chart1') 
    .selectAll('.nv-line').each(function(d,i){ 
    d3.select(this).attr("stroke-dasharray",dasheddesign[i]); 
    });

}）;

不需要延迟

来源

2014-11-18 19:32:05

这工作正常，但你的隐藏，然后从图例取消隐藏系列。破折号风格消失:(

来源

2015-01-19 18:20:04 Rafal

在rCharts中改变线条类型NVD3（nPlot）

回答

相关问题