格式化nvd3.js颜色和interactiveGuideLine

我已经迷失在d3.js杂草中。我正在使用nvd3.js（http://i.stack.imgur.com/ghueS.png）制作图表。格式化nvd3.js颜色和interactiveGuideLine

但是，虽然颜色在图例中显示正确，但它们不在图表中。此外，悬停工具提示中还有很大的空白区域。看看对象结构，看起来像是一层太多的按键，这让我觉得颜色问题和空白区域与我的实际按键太深埋在对象中有关（http://i.stack.imgur.com/k46CO.png）。

我已经看过nest（）和rollup（），但无法理解它们可能如何提供帮助。

我的JavaScript如下：

d3.csv("http://fwllc.wpstagecoach.com/wp-content/themes/frameworkcr/markers.csv",function(err,data){ 

var noDates = d3.keys(data[0]).filter(function(k){return k!="date"}); 
var dataToPlot = noDates.map(function(k){ 
     return {"key":k, 
       "values":data.map(function(d){ 
     return { 
     "x":d3.time.format("%m/%d/%y").parse(d.date), 
     "y":+d[k] 
     } 
     })} 
    }) 
    console.log(d3.entries(dataToPlot)); 
     nv.addGraph(function() { 
     var chart = nv.models.lineChart() 
      .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room. 
      .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! 
      // .transitionDuration(350) //how fast do you want the lines to transition? 
      .showLegend(true)  //Show the legend, allowing users to turn on/off line series. 
      .showYAxis(true)  //Show the y-axis 
      .showXAxis(true)  //Show the x-axis 

     ; 

      chart.xAxis  //Chart x-axis settings 
      .tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); }); 

      chart.yAxis  //Chart y-axis settings 
       .axisLabel('Total Return Percent') 
       .tickFormat(d3.format('%')); 

     d3.select('#chart').append("svg") 
      .datum(dataToPlot) 
      .call(chart); 

     nv.utils.windowResize(function() { chart.update() }); 
     return chart; 
     }); 

    })

我的.csv文件的部分内容：

date,ESG,global100,outperformance 
12/22/08,0,0,0 
3/23/09,-0.059812891,-0.094081914,0.034269023 
6/22/09,0.137426291,0.033160892,0.104265399 
9/21/09,0.418041893,0.249191458,0.168850435 
12/21/09,0.460914373,0.294278644,0.166635729 
3/22/10,0.504442354,0.306489826,0.197952528

来源

2015-04-15 Darius

我复制你的代码到plnkr，它似乎是正确的......

<div id="chart" style="width:300px; height:300px"></div>

plnkr

enter image description here

来源

2015-04-15 07:27:07

哈！引人入胜，而且很好。有一些旧的和错误的.css离开我的图表（和我）蓝色 - 以及一些表格.css添加我通过使用Chrome调试器访问的空白空白，使用F8冻结交互式指南悬停状态并搜索nvtooltip类。 – Darius

格式化nvd3.js颜色和interactiveGuideLine

回答

相关问题